CSS中overflow:auto未生成滚动条反而挤压容器内容？

问题出在Flex布局的默认收缩机制：

• .graph-container是flex容器，作为子元素的.graph-selector默认带有flex-shrink: 1属性——当容器空间不足时，浏览器会自动压缩这个子项的尺寸，而非触发子项内部的滚动。
• 同时，.graph-selector自身也是垂直方向的flex容器，它的子元素（按钮）默认也会被压缩高度，进一步让overflow-y: auto无法生效。

修复方案 #

1. 禁止父容器压缩.graph-selector
   给.graph-selector添加flex-shrink: 0，强制它保持设置的高度，这样内部内容超出时才会触发滚动：

.graph-selector{
    display: flex;
    flex-direction: column;
    gap: 2px;
    height: 100%;
    width: 320px;
    margin-top: 46px;
    overflow-y: auto;
    overflow-x: hidden;
    flex-shrink: 0; /* 新增：禁止被父容器压缩 */
}

2. （可选）固定按钮高度
   如果按钮仍被内部flex容器压缩，给按钮添加flex-shrink: 0，确保按钮高度不会被挤压：

.graph-selector button {
    flex-shrink: 0; /* 固定按钮高度 */
}

补充说明 #

由于.graph-container设置了align-items: center，.graph-selector的margin-top: 46px可能会让它的实际可用高度小于父容器高度。如果需要精确控制高度，可以将.graph-container的align-items改为flex-start，或者调整.graph-selector的height值（比如用calc(100% - 46px)）。

内容的提问来源于stack exchange，提问作者user28751094