起因（源自一个现实的需求）

最近公司有一个大屏开发的需求，其中的布局要求需要做到自适应。我的想法是通过 css flex 布局进行实现。（当然，简单点可以用 px2vw 的方案去写设计稿的参数，但是要考虑到尽可能的完美适配，可能会有像素误差，我就不使用该方案去实现。）

需求如下：

1. 有一个父容器撑高至最大的高度。
2. 父容器内有一个子容器也要撑到最高，且它的内容要做到溢出滚动的效果。

大概的设计稿如下：

实际代码和理想的情况不一样

这是我自己实现的代码。（样式代码通过 tailwindCSS 实现）

因为层次很多，这里我是通过 flex-grow: 1 的方式将容器撑满。

<div class="flex flex-col w-[100vw] h-[100vh]">
  <!-- 父容器 -->
  <div
    class="flex flex-col flex-grow-[1] p-[20px] border-solid border-[1px] border-[brown]"
  >
    <!-- 子容器 -->
    <div
      class="flex flex-grow-[1] overflow-y-auto p-[20px] border-solid border-[1px] border-[orange]"
    >
      <div class="h-[1000px]">子容器内容</div>
    </div>
  </div>
</div>

实际结果如下：

明明子容器已经撑满了容器，但不能触发溢出滚动。（图中是父容器溢出滚动了）

关于 overflow: hidden 的一些小细节

我苦寻答案很久才发现 MDN 对于 overflow: hidden 的触发条件的说明需要重点注意。

为使 overflow 具有效果，块级水平的容器必须有一个设定的高度（height 或 max-height）或 white-space 设置为 nowrap。

这里由于子容器没有显式的设置一个 height or max-height 。我们需要给一个 height: 0 就可以了。

https://developer.mozilla.org/zh-CN/docs/Web/CSS/overflow#%E6%8F%8F%E8%BF%B0

最终代码如下：

<div class="flex flex-col w-[100vw] h-[100vh]">
  <!-- 父容器 -->
  <div
    class="flex flex-col flex-grow-[1] p-[20px] border-solid border-[1px] border-[brown]"
  >
    <!-- 子容器 显示的设置一个 height: 0 -->
    <div
      class="h-0 flex flex-grow-[1] overflow-y-auto p-[20px] border-solid border-[1px] border-[orange]"
    >
      <div class="h-[1000px]">子容器内容</div>
    </div>
  </div>
</div>

总结

溢出滚动是基于有确定宽高（显式设置 height or width）的容器才能实现。这有点超出我的预期，它像是一个固定的规则。需要深深地记住。

---