css quick maffs

so you did this:

.foo:hover {
transform: scale(1.1);
}

and now ugly scrollbar is there when the element is scaled.

No, don't do overflow: hidden. There's a better way. Instead, do this:

.container {
padding: 1rem;
box-sizing: border-box;
}

the element total width is calculated based on the width of its content. That's true unless you specified width and height explicitly (if you did so, you're a doofus, I'm sorry).

Scaling makes content somewhat larger. With border-box, paddings work differently with the total width.

By default, if you set width to say 100px, and paddings are 20px, total width will be 140px — it's your 100px of content plus two paddings of 20px. width property set the width of the content, not the total width.

With border-box, width property sets the total width. So if you set width to 100px and paddings to 20px, total width would be 100px, just like you set it, and content will be 60px wide — it's 100px minus 20px times two.

The key part is it doesn't end with explicit width. The algorithm remains. When some node is rendered, its total width is calculated. When you use border-box, the total width will stay the same even if your content grows by some value that is less than your paddings. So, your content was 100px, you scaled it, and it became 110px. Well, then that extra 10px will be subtracted from your paddings, and they will be 15px each instead of 20px.

No more ugly scroll bar. Yaaay!

aight bye