实现滚动模态框时，为何需用flex:1 1 0px而非flex:1？

先明确flex简写的基础规则：

• flex: 1 等价于 flex: 1 1 auto
• flex: 1 1 0px 是显式将flex-basis设为0px

针对你这种「头部+可滚动内容+底部」的垂直flex模态框场景，两者的核心差异直接决定了滚动效果能否正常工作：

1. flex-basis: auto 会让内容区优先“撑满”自身内容尺寸 #

当用flex:1时，浏览器会先计算内容区本身的固有高度（比如里面文字、元素的总高度），再把父容器剩余空间分配给它。如果内容区的固有高度已经超过父容器的可用空间，overflow-y:scroll就完全失效——因为内容区会被内容撑到和自身高度一致，不会被限制在父容器的剩余空间里，自然不会出现滚动条。

2. flex-basis: 0px 强制内容区先“放弃”固有尺寸，按flex规则分配空间 #

flex:1 1 0px里的0px，相当于告诉浏览器：先把这个元素的初始高度设为0，再让它通过flex-grow:1去占据父容器的所有剩余空间（减去头部和底部的固定高度）。这时内容区的高度被严格限制在父容器分配的空间内，一旦内部内容超出这个高度，overflow-y:scroll就会触发，完美实现你要的可滚动效果。

直观对比例子 #

假设模态框父容器总高度500px，头部和底部各占50px，剩余400px为可用空间：

• 用flex:1：如果内容区内部内容总高度600px，浏览器会把内容区高度设为600px，直接撑高整个模态框，不会出现滚动。
• 用flex:1 1 0px：内容区初始高度为0，被拉伸到400px，超出400px的内容会被滚动隐藏，完全符合模态框的需求。

补充：为什么用0px而非0%？ #

在垂直flex布局（flex-direction:column）中，flex-basis设为百分比时，需要父容器有明确的高度才能生效；而0px是绝对单位，不依赖父容器高度计算，兼容性和可靠性更强。

内容的提问来源于stack exchange，提问作者Jose Carlos Ramírez