嵌套flexbox子元素溢出时实现滚动的正确方法是什么

Flex 布局规范中，默认状态下纵向 flex 容器的子项（flex item）min-height 属性值为 auto，规则要求 flex 项的最小高度不能小于其内容的高度。所以即便你给 flex 项设置了 flex: 1 来分配剩余高度，只要子内容高度超过了 flex 容器的可用高度，flex 项依然会被内容撑开，最终导致你在父节点设置的 overflow-y: scroll 无法触发——因为父容器本身已经被撑到和内容等高，没有溢出自然不会产生滚动。
你之前给祖先节点设置 overflow-y: hidden 能生效，本质是当元素的 overflow 不为 visible 时，min-height: auto 的限制会自动失效，相当于间接把 flex 项的最小高度限制改成了 0，flex 项不再被内容撑开，内层的滚动规则才能正常生效。

不需要给所有中间 flex 祖先加 overflow 属性（该方案可能会额外截断需要溢出展示的内容，比如下拉菜单、悬浮提示等），符合标准规范的解法是直接给需要参与高度分配的中间 flex 项设置 min-height: 0，主动关闭默认的内容高度限制：

#greatgrandparent, #grandparent {
  min-height: 0;
}

如果真实场景中存在多层嵌套 flex 节点，你可以通过通用类名批量处理，大幅降低维护成本：

/* 给所有纵向排列的flex容器加这个类名 */
.flex-col {
  display: flex;
  flex-direction: column;
}
/* 统一重置纵向flex容器子项的最小高度限制 */
.flex-col > * {
  min-height: 0;
}

后续你只要给所有纵向 flex 容器加上 .flex-col 类，就不需要再逐个给嵌套节点加额外属性，即可保证内层滚动逻辑正常生效。

内容的提问来源于stack exchange，提问作者Patrick Finnigan