核心原因：Flex 子元素的默认最小尺寸限制

要理解这个问题，首先要知道 flex 布局的一个关键默认行为：flex 子元素的min-height（垂直方向）/min-width（水平方向）默认值是auto，这意味着flex 子元素的最小尺寸不会小于其内部内容的固有尺寸。

当你给 flex 子元素设置flex: 1时，本意是让它 “占满父容器剩余的所有空间”，但如果子元素内部内容的高度超过了父容器分配的空间，min-height: auto会阻止子元素被 “压缩”，导致flex: 1的效果失效（子元素会撑开父容器，而不是适配父容器）。

此时可以添加min-height: 0;（flex-direction: column）/min-width: 0;（flex-direction: row）

其作用就是覆盖这个默认的auto值，允许 flex 子元素的高度被压缩到小于其内容的固有高度，从而让flex: 1能够正常生效。

注意：避免与固定尺寸属性冲突

如果给 flex 子元素同时设置height: 100%/height: 200px等固定尺寸，会覆盖flex: 1的空间分配逻辑，此时min-height: 0也会失效 —— 因为flex: 1的优先级低于显式的height。