flex 布局 overflow-失效的问题？

Question

很正常的一个上下两个 div 。外层有一个 wrapper 我没有标记，只是很简单的 flex 布局，flex-direction :column

我的需求是想达到设置了 flex-grow 的那个 div 内容溢出的话出现滚动条。

我发现在第一个 div 上设置 overflow-scroll 失效。

如果要达到我想在 flex-grow 那个 div 内实现内容溢出出现滚动条的功能的话，该如何设置呢？
是我理解错了吗

Answer 1

scroll 出现的条件之一是内容超出容器，所以我猜你没设置高度 height 或者 max-height。

当然你有可能设置了 100%，但是我猜你上级没设置。所以你可以考虑用 vh 这个单位

Answer 2

1. 使用 overflow-* 的隐含条件是，该容器需要有 max-height。

2. flex:1 存在两种情况：

   1. 自然弹性，即从某一级父容器继承了高度，然后填满。此时其实它没有隐藏的 max-height 属性。
   2. 父容器指定了高度，那么它就有了 max-height
3. 所以表现很奇怪，有时候有，有时候没有
4. 我目前的解决方案是如果没有，就给它的父元素加高度，或者给合适的父元素加高度

Answer 3

可以试试给设置了flex-grow的容器里的内容外面再包一层div，给这个div设置height: 100%; overflow: scroll;

Answer 4

在 flex: 1; 的那个元素上写一个 height: 0; 试一试