Spotify克隆项目overflow:auto失效，滚动条不显示求助

问题根源 #

你给.main-content设置了overflow: scroll但没出现滚动条，核心原因是这个容器没有高度限制——它会自动随着内部内容的高度撑开，永远不会触发滚动机制。

修复方案 #

给.main-content添加固定高度或最大高度限制，同时优化滚动行为：

.main-content {
  padding: 1.5rem;
  /* 用视口高度减去顶部导航栏高度，适配你的布局，比如导航栏是80px */
  max-height: calc(100vh - 80px);
  overflow-y: auto; /* 仅在垂直方向内容超出时显示滚动条，比scroll更友好 */
}

额外排查点 #

• 如果.main-content的父元素是Flex容器，需要给它加上flex: 1，确保它能占满父容器的可用垂直空间，否则高度限制可能不生效。
• 检查是否有其他CSS属性（比如position: absolute或float）影响了容器的高度计算，确保容器的高度约束是有效的。

修改后，当你添加大量卡片导致.main-content内部高度超过设置的最大高度时，滚动条就会自动出现了。

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