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

user_1919821 0
Viewed 509

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>

flexbox css html
1 Answers

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>

user_86203330
Related