Flex 布局下 overflow 无效？如何解决？

flex 布局下 overflow 失效的解决方案

在 Flex 布局中遇到 overflow 失效问题时，需要考虑以下因素：

内容超出容器：
overflow 的一个触发条件是内容超出容器。因此，如果第一个 div 没有设置高度或最大高度，它可能无法触发 overflow。

设置容器高度：
要解决此问题，请确保为外层容器（在你的示例中是未标记的，但拥有 flex-direction:column）设置一个高度或最大高度。使用 vh（视口高度）单位可能是明智的选择，因为它可以随着视口大小的变化而动态调整。

代码示例：

.wrapper {
  /* 设置容器高度或最大高度 */
  height: 40vh;
}

通过这些设置，第一个 div 的内容超出容器后，它将触发 overflow-scroll，允许用户滚动浏览溢出内容。

以上就是Flex 布局下 overflow 无效？如何解决？的详细内容，更多请关注其它相关文章！