Bug, padding go overflow in inline-flex+block+flex+block container? - html

Question

I found strange case. when I use html like that :
<div class="card" style="display:inline-flex; overflow:hidden;">
<div style="display: block; width:10em; height: 5em;">
<div style="display:flex;">
<!-- here -->
<div style="padding-bottom: 10em;"></div>
</div>
</div>
</div>
The div padding-bottom:10em push out others div.card blow the div.card like the padding is some invisible part of the div.card
When I change the internal flex div to block div the bug disapear
It look like the internal flex as it own layout that breach out from the blok and the outer inline-flex
How I prevent that, and make the div with the padding cut out like normal content into overflow hidden element.
It can be I found new bug in chrome flex model ?
Live example :
https://uvzoo.csb.app/
Codesendbox: https://codesandbox.io/s/zen-engelbart-uvzoo
div {
outline: 1px solid pink;
padding: 0.5em;
margin: 0.3em;
}
<div style="display: block; width:30em; height: 40em; padding: 1em;">
<!-- block card -->
<div style="display:inline-flex; overflow:hidden;">
<div style="display: block; width:10em; height: 5em;">
<div style="display:flex;">
<div style="padding-bottom: 10em;"></div>
</div>
</div>
</div>
<!-- end block card -->
<!-- block card -->
<div style="display:inline-flex; overflow:hidden;">
<div style="display: block; width:10em; height: 5em;">
<div style="display:flex;">
<div style="padding-bottom: 10em;"></div>
</div>
</div>
</div>
<!-- end block card -->
<!-- block card -->
<div style="display:inline-flex; overflow:hidden;">
<div style="display: block; width:10em; height: 5em;">
<div style="display:flex;">
<div style="padding-bottom: 10em;"></div>
</div>
</div>
</div>
<!-- end block card -->
<!-- block card -->
<div style="display:inline-flex; overflow:hidden;">
<div style="display: block; width:10em; height: 5em;">
<div style="display:flex;">
<div style="padding-bottom: 10em;"></div>
</div>
</div>
</div>
<!-- end block card -->
<!-- block card -->
<div style="display:inline-flex; overflow:hidden;">
<div style="display: block; width:10em; height: 5em;">
<div style="display:flex;">
<div style="padding-bottom: 10em;"></div>
</div>
</div>
</div>
<!-- end block card -->
</div>

Answer 1

Adding vertical-align:top fixes the issue. I don't know exactly why but it seems there is a complex calculation that is affecting the baseline calculation of each box making it outside and far from the bottom. Since baseline is the default alignment, you are getting this strange result
div {
outline: 1px solid pink;
padding: 0.5em;
}
.box {
display: inline-flex;
vertical-align:top;
overflow: hidden;
}
.box>div {
display: block;
width: 10em;
height: 5em;
}
.box>div>div {
display: flex;
}
.box>div>div>div {
padding-bottom: 10em;
}
<div style="display: block; width:30em; height: 40em; padding: 1em;">
<!-- block card -->
<div class="box">
<div>
<div>
<div></div>
</div>
</div>
</div>
<div class="box">
<div>
<div>
<div></div>
</div>
</div>
</div>
<div class="box">
<div>
<div>
<div></div>
</div>
</div>
</div>
<div class="box">
<div>
<div>
<div></div>
</div>
</div>
</div>
</div>
If we add some text we can notice this:
div {
outline: 1px solid pink;
padding: 0.5em;
}
.box {
display: inline-flex;
overflow: hidden;
}
.box>div {
display: block;
width: 10em;
height: 5em;
}
.box>div>div {
display: flex;
}
.box>div>div>div {
padding-bottom: 10em;
}
<div style="display: block; padding: 1em;">
<!-- block card -->
<div class="box">
<div>
<div>
<div></div>
</div>
</div>
</div> some text here
<div class="box">
<div>
<div>
<div></div>
</div>
</div>
</div>
<div class="box">
<div>
<div>
<div></div>
</div>
</div>
</div>
</div> some text here
<div class="box">
<div>
<div>
<div></div>
</div>
</div>
</div>
</div>