Ошибка, заполнение go переполнение в контейнере inline-flex + block + flex + block?

Question

Я обнаружил странный случай. когда я использую html вот так:

<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>

div padding-bottom:10em Пу sh Из других div.card Удар div.card, как дополнение - невидимая часть div.card

Когда я изменяю внутреннюю flex div на block div ошибка исчезает

Это выглядит как внутреннее сгибание, так как оно имеет собственный макет, выходящий из blok и внешнего inline-flex

Как это предотвратить, и сделать div с вырезанным отступом, как обычное содержимое, в скрытый элемент переполнения.

Может быть, я обнаружил новую ошибку в chrome flex model?

Пример в реальном времени: 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

Добавление vertical-align:top устраняет проблему. Я не знаю точно, почему, но кажется, что есть сложный расчет, который влияет на базовый расчет каждого блока, делая его снаружи и далеко от дна. Поскольку baseline является выравниванием по умолчанию, вы получите странный результат

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>

Если мы добавим некоторый текст, мы можем заметить это:

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>