Overflow - Inline Block VS Flex Box

Hi everyone!

There is something I don’t get about overflow in a Section.
I set the height of a Section to 95VH and I put 3 Div in it, the first 2 in Auto height and the last one 100% height.

When my section is “inline” the last Div (100% height) is overflowing the Section.
But when I set the Section as a vertical Flex, the same div is contained.

Could someone help me understand this please?
Thank you! :slight_smile:


Hi @Francois_Jutier :wave: welcome to the forum.

That’s an interesting one, I was able to replicate it.

I don’t have an authoritative answer for you (maybe someone else does), but I can guess.

My two cents…

A couple of characteristics for an “inline block” is that they layout horizontally and wrap to the next line.

So think of writing text in a word editor. When your sentence gets to the right edge of the word editors screen, it automatically wraps to the next line.

In your scenario, you set the height of the section less than the height of its child elements. Since inline block layouts out horizontally (much like text in a word editor) it wrapped to the next line (overflowing) - which is outside of its parent.

I could confirm this even more by setting the sections overflow to hidden. That clipped it and it then gave the appears of being contained.

I also am wondering if the difference in layout units between vh and % also plays into this.

I don’t think this is a bug, but more of a CSS foible.

Maybe that sparks an idea or two.

Hi @ChrisDrit !

Thanks for your answer and your explanation to this!