CSS的flex布局的flex: 1；不生效

解决：给其再设置min-height:0;

1. 先明确 flex: 1 的作用

flex: 1 是 flex-grow: 1、flex-shrink: 1、flex-basis: 0% 的简写：

• flex-grow: 1：元素会拉伸占据父容器的剩余空间。
• flex-shrink: 1：空间不足时，元素会收缩以适应容器。
• flex-basis: 0%：元素的 “基准尺寸” 为 0，理论上会完全依赖 flex-grow 分配空间。

2. 问题根源：Flex 子元素的「隐含最小尺寸」

浏览器对 Flex 子元素（flex item） 有一个默认规则：

• min-width: auto（水平方向）、min-height: auto（垂直方向）。
• 这意味着：Flex 子元素的 最小尺寸不能小于其内容的固有尺寸（比如内容的宽度、高度，或子元素中最大的固定尺寸元素）。

3. 冲突场景：flex: 1 预期 vs 实际表现

当 Flex 子元素设置 flex: 1 时，本希望它：

• 拉伸占满父容器剩余空间（flex-grow），或
• 收缩适应父容器（flex-shrink）。

但 默认的 min-width/height: auto 会 “阻碍” 这个过程：

• 若子元素内容的固有尺寸 大于 父容器分配的空间，min-width/height: auto 会强制子元素保持内容的最小尺寸，导致：
  • flex-grow 无法生效（因为内容已经 “撑开” 子元素，没有剩余空间可分配）；
  • flex-shrink 也无法生效（因为子元素不能小于内容的最小尺寸，无法收缩）。

4. min-height: 0 如何解决问题？

设置 min-height: 0（垂直方向）或 min-width: 0（水平方向）时：

• 覆盖了浏览器的默认行为（auto），让 Flex 子元素的 最小尺寸可以小于内容的固有尺寸。
• 此时，flex-grow 和 flex-shrink 才能正常工作：
  • 若父容器有剩余空间，子元素会按 flex-grow 拉伸；
  • 若空间不足，子元素会按 flex-shrink 收缩，甚至可以通过 overflow: auto 出现滚动条（因为子元素允许 “缩小到内容以下”）。