一、flex:1; height: 0;

在做局部滚动（比如聊天窗口、视频列表、全屏弹窗）时，它是核心中的核心。

1. 场景设定

假设你的弹窗（父容器 .parent）是一个 100米高的容器。

• 顶部标题栏（.title）占了 10米。
• 剩下的 90米 应该给列表（.main）。

2. 如果只写 flex: 1 (不写 height: 0)

flex: 1 的意思是：“剩下的空间（90米）都给我”。
但是，浏览器还有一个潜规则：“内容优先”。
假如你的列表里有 1000 个数据，它们原本堆起来有 2000米 高。
此时浏览器会想：

“虽然 CSS 让我只占剩下那 90米，但是内容实在太多了，有 2000米呢，为了不让内容被截断，我就自动把这个容器撑大到 2000米吧。”

结果：

• .main 变成了 2000米高。
• 父容器也被撑爆了。
• 页面整体滚动（或者溢出），而不是在 .main 内部出现滚动条。

3. 加上 height: 0 (或者 min-height: 0)

这时候，你加了一句 height: 0。这句话的作用是切断后路。
它的潜台词是告诉浏览器：

“别管内容有多少！这个容器的基础高度就是 0。现在，请完全按照 Flex 的规则，把剩下的空间（90米）分给它。多一厘米也不许撑大！”

于是流程变成了这样：

1. 初始： .main 被强制设为 0 高度。
2. 分配： Flex 布局计算，父容器剩 90米，因为 flex: 1，所以 .main 被拉伸到 90米。
3. 最终： .main 被锁死在 90米高。
4. 内容： 里面的内容有 2000米高。
5. 冲突： 容器 90米，内容 2000米 -> 触发 overflow 滚动条出现。

总结

这对属性的逻辑是：

1. flex: 1: 负责抢占剩余空间。
2. height: 0: 负责禁止被子元素的内容撑大。