为何overflow-y: auto不生效？Flex布局侧边栏右侧内容无法滚动

我帮你排查了下代码，右侧内容无法滚动的核心原因是滚动容器缺少高度约束，具体细节如下：

• 你的.outside flex容器没有设置高度，它默认会被内部内容撑开，导致.products容器也跟着内容无限延伸，完全触发不了overflow-y:auto的滚动效果
• .sidebar设置了height:100vh占满视口高度，但作为父容器的.outside没有高度限制，.products自然也不会被约束在视口范围内，内容超出时只会撑开整个页面，再加上body设置了overflow-y:hidden，最终导致整个页面都没法滚动

接下来是具体的修复方案，只需要调整几个CSS属性就能解决：

修改后的CSS代码 #

@import url('https://fonts.googleapis.com/css2?family=Nunito+Sans:wght@300&display=swap');
body {
 font-family: 'Nunito Sans', sans-serif;
 overflow-y: hidden;
}
* {
 margin: 0;
 padding: 0;
 border: 0;
 outline: 0;
}
.outside {
 display: flex;
 flex-direction: row;
 flex-wrap: nowrap;
 flex-basis: auto;
 height: 100vh; /* 新增：让flex容器占满视口高度 */
}
.sidebar {
 flex: 0 0 20%; /* 修改：固定宽度20%，不随布局伸缩 */
 list-style: none;
 text-decoration: none;
 left: 0;
 height: 100vh;
 background-color: #666666;
}
.sidebar header {
 font-size: 1.7rem;
 color: white;
 text-align: center;
 line-height: 5rem;
 background-color: #777777;
 user-select: none;
}
.sidebar ul a {
 height: 100%;
 width: 100%;
 line-height: 4rem;
 font-size: 1.2rem;
 color: white;
 padding-left: 2rem;
 text-decoration: none;
 box-sizing: border-box;
 border-bottom: 1px solid rgb(255, 255, 255, .2);
}
ul li:hover a {
 font-weight: bold;
}
.products {
 flex: 1; /* 占满侧边栏之外的剩余空间 */
 display: flex;
 flex-wrap: wrap;
 overflow-y: auto; /* 仅保留垂直滚动，水平滚动可按需保留 */
 padding: 1rem; /* 可选优化：让内容不贴容器边缘 */
 box-sizing: border-box; /* 确保内边距不会撑开容器宽度 */
}
.product-card {
 display: flex;
 min-width: 6rem;
 flex-direction: column;
 padding: 2%;
 flex: 1 16%;
 background-color: #FFF;
 box-shadow: 0px 0px 1px 0px rgba(0, 0, 0, 0.25);
 margin: 0.5rem; /* 可选优化：给卡片添加间距，视觉更舒适 */
}
.product-image img {
 width: 100%;
}
.product-info {
 margin-top: auto;
 padding-top: 20px;
 text-align: center;
}
h5 {
 font-weight: 500;
 line-height: 1.7em;
}
h6 {
 color: #666;
 font-size: 14px;
}

关键修改点说明 #

1. 给.outside添加height:100vh：让整个flex容器占满浏览器视口高度，强制子元素的高度被约束在视口范围内
2. 把.sidebar的flex:1改成flex:0 0 20%：固定侧边栏宽度为20%，避免flex布局下的宽度分配冲突
3. 给.products加上box-sizing:border-box：后续添加内边距时，不会导致容器宽度超出父元素范围
4. 可选视觉优化：给产品卡片添加外边距，让布局更美观

修改完成后，右侧.products容器会在内容超出视口高度时自动显示垂直滚动条，左侧侧边栏保持固定不动，完全符合你的需求。

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