CSS 使用 flex-shrink 0 解决 flex 1 布局中元素设置的高度不生效问题

现象

代码

.container {
    flex: 1;
    overflow-y: scroll;
}

原因

flex: 1依赖容器高度，没有容器高度，flex: 1会无限拉伸，把元素高度压缩到最小。

解决

使用flex-shrink: 0锁定高度，即使容器空间临时不足，也不会挤压元素的固定高度。

.container {
    flex: 1;
    flex-shrink: 0;
    overflow-y: scroll;
}