flex 布局 overflow-失效的问题？

  • Z时代
  • 2024-02-20
  • 分类：IT

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

flex 布局 overflow-失效的问题？

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

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

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

回答：

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

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

回答：

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

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

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

回答：

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

以上是 flex 布局 overflow-失效的问题？ 的全部内容， 来源链接： utcz.com/p/933324.html

回到顶部