Flex 布局中,flex: 1 和 overflow: auto 应用于第二层的元素时,overflow: auto 失效

在嵌套的 Flex 布局中，当你将 flex: 1 和 overflow: auto 应用于第二层的元素时，可能会导致 overflow: auto 失效。这是因为默认情况下，Flex 容器的子元素会根据内容自动撑开，而不考虑 overflow 属性。

要解决这个问题，你可以使用 min-height: 0 来强制第二层元素限制其高度，并启用滚动条。同时，还需要确保父容器也具有适当的高度或最大高度限制。

以下是一个示例代码，展示如何在嵌套的 Flex 布局中设置 flex: 1、overflow: auto 并使其生效：

.container {
  display: flex;
  flex-direction: column;
  height: 35rem; /* 设置容器的固定高度 */
}

.flex1 {
  flex: 1;
  min-height: 0; /* 强制限制元素高度 */
  overflow: auto; /* 显示滚动条 */
}