inline-flex+block+flex+block容器内padding溢出问题

首先，我来拆解你遇到的问题：当外层是inline-flex且设置了overflow:hidden的容器时，内部嵌套的flex容器中，带有大padding-bottom的子元素会撑开外层容器，导致同级的.card元素被挤到外部；但把内部flex容器换成block后，这个问题就消失了。

问题根源分析 #

这并不是Chrome的bug，而是CSS布局规则的正常表现，核心原因有两个：

1. inline-flex容器的尺寸特性：inline-flex属于行内级弹性容器，它的默认高度是“收缩适应”（shrink-to-fit），即由内部内容的实际高度决定——哪怕内部元素超出了中间block容器的高度，只要中间block的overflow是默认的visible，溢出的内容就会“穿透”到inline-flex容器，撑大它的高度。
2. flex容器的高度计算：内部的flex容器（display:flex）作为block容器的子元素，默认高度为auto，会被内部带有大padding的子元素完全撑开，远超中间block设置的height:5em；而中间block容器因为没有设置overflow:hidden，溢出的内容会直接暴露出来，进而影响外层inline-flex容器的尺寸。

当你把内部flex换成block容器时，看似问题消失，本质上是因为你可能误操作添加了隐藏溢出的规则，或者block容器的布局特性让你产生了错觉——实际上如果不设置溢出隐藏，block容器的子元素同样会撑开父容器并溢出。

可行的解决方案 #

以下几种方法都能让带有padding的元素被外层overflow:hidden正确裁剪：

方案1：给中间的block容器添加overflow:hidden

让中间的block容器直接裁剪内部溢出的内容，避免它撑大外层的inline-flex容器：

<div class="card" style="display:inline-flex; overflow:hidden;">
  <div style="display: block; width:10em; height: 5em; overflow:hidden;">
    <div style="display:flex;">
      <div style="padding-bottom: 10em;"></div>
    </div>
  </div>
</div>

方案2：给外层inline-flex容器设置明确高度

直接限制外层inline-flex容器的高度，配合overflow:hidden裁剪溢出内容：

<!-- 注意：高度要包含中间block的padding，这里附加样式中所有div有0.5em上下padding，所以总高度是5em + 1em = 6em -->
<div class="card" style="display:inline-flex; overflow:hidden; height:6em;">
  <div style="display: block; width:10em; height:100%;">
    <div style="display:flex;">
      <div style="padding-bottom: 10em;"></div>
    </div>
  </div>
</div>

方案3：给内部flex容器设置高度和溢出隐藏

让内部flex容器的高度限制在中间block容器的范围内，同时裁剪自身溢出：

<div class="card" style="display:inline-flex; overflow:hidden;">
  <div style="display: block; width:10em; height: 5em;">
    <div style="display:flex; height:100%; overflow:hidden;">
      <div style="padding-bottom: 10em;"></div>
    </div>
  </div>
</div>

总结 #

这个现象完全符合CSS布局规范，不是浏览器bug。核心思路就是在溢出的内容路径上添加一层overflow:hidden，或者限制外层容器的明确尺寸，让溢出的内容被正确裁剪，不会影响同级元素的布局。

内容的提问来源于stack exchange，提问作者pery mimon