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

IT行业相对于一般传统行业，发展更新速度更快，一旦停止了学习，很快就会被行业所淘汰。所以我们需要踏踏实实的不断学习，精进自己的技术，尤其是初学者。今天米云给大家整理了《Flex 布局下 overflow 无效？如何解决？ 》，聊聊，我们一起来看看吧！

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

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

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

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

代码示例：

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

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

以上就是《Flex 布局下 overflow 无效？如何解决？ 》的详细内容，更多关于的资料请关注米云公众号！

掌握最实用的电脑快捷键，提升工作效率的必备知识