Every web developer knows about Flexbox. It's one of the most commonly used layout model in CSS and it works in a very intuitive way, right? Rece

Flexbox or black box? A deep-seated urge to understand arcane details of CSS layout | Polipo Blog

submited by
Style Pass
2024-11-25 12:00:02

Every web developer knows about Flexbox. It's one of the most commonly used layout model in CSS and it works in a very intuitive way, right?

Recently, I was implementing a design from Figma which had two columns of the same size. The implementation in Figma was pretty simple: the container had a horizontal auto-layout, and each column width was set to Fill.

So I implemented this layout in CSS in a similar way, using display: flex on the container and flex: 1 on each column, and I went on styling each column separately. Sure enough, the columns ended up being of different size in the browser.

The right column has more padding, sure. But - I thought - the padding only affects the layout inside of a column, so surely it won't change its size.

(I know what you're thinking. No, this has nothing to do with box-sizing, min-width or the actual content of the columns. It's a real effect.)

Leave a Comment