弹性布局中flex：1需配合height：0固定高度

当 flex 容器的主轴方向是垂直（flex-direction: column）时：
默认情况下，flex 项的高度会先基于内容自身高度（height: auto）计算，再分配剩余空间。
问题出现：如果某个 flex 项的内容高度不确定（如文本、图片或动态内容），浏览器会优先用内容高度占用空间，可能导致 flex: 1 无法按预期均分空间。
height: 0 的作用强制初始化高度
通过设置 height: 0（或 min-height: 0），你告诉浏览器：
忽略内容原始高度：将 flex 项的初始高度重置为 0。
完全依赖 flex 分配：flex: 1 会根据容器的剩余空间重新分配高度。
解决内容溢出问题
如果没有 height: 0，内容高度可能撑大 flex 项，导致其他 flex 项被压缩（即使设置了 flex: 1）。