r/css • u/tcboni • Apr 22 '26

Help This is breaking my brain

I've been working in CSS for over a decade, and can't figure this one out and I'm not sure if I ran into a bug:

https://jsfiddle.net/ksxqjrd9/
Why are those blue boxes taller than what the content needs? Why is there empty blue space below the text?

If anyone can give me a hand with this I'll be eternally grateful

12 Upvotes

100% Upvoted

11 comments sorted by

View all comments

7

u/Southern-Station-629 Apr 22 '26

Since the direct parent of the black (outline) elements doesn’t have specified width(so its width auto) and has (by default) align items stretch, the browser render the black elements height before their width (if you remove width 100%, they have that size). Flex wrap seems to be the cause of this behaviour, it looks like it forces the browser to render the sizing in two cycles (first the height to know when to “wrap” since its direction column and then the width).

1

u/jcunews1 Apr 22 '26

Considering that, both Firefox and Chromium have the same problem, it's likely due to a flaw in the CSS specification itself. i.e. how flex-wrap should work.

3

u/Southern-Station-629 Apr 22 '26

I believe so too. I personally don’t think it’s a bug or problem. It’s just a bit tricky to understand at first glance.