如何在Flex布局中仅让左侧导航栏溢出滚动右侧主内容区固定不滚动

数据老陈

2026-10-5

实现方案

你只需要调整几处CSS属性即可实现仅左侧导航溢出滚动的效果，修改要点如下：

调整flex容器属性：移除不必要的横向滚动设置，禁止桌面端容器内容换行，同时隐藏容器整体溢出
给左侧导航盒子添加纵向溢出滚动属性
可将容器固定高度替换为视口高度100vh，实现全屏高度适配

具体修改代码

1. CSS部分修改

/* 修改原.flex-container样式 */
.flex-container {
  display: flex;
  justify-content: space-between;
  flex-direction: row;
  /* 桌面端禁止flex项目换行，避免左右布局错位 */
  flex-wrap: nowrap;
  /* 隐藏容器整体溢出，不让整个页面滚动 */
  overflow: hidden;
  /* 可以替换为height: 100vh; 实现占满整个浏览器窗口高度 */
  height: 1000px;
  background-color: #E7E9EB;
}

/* 给左侧导航盒子单独加样式，建议先给左侧div加class="left-nav" 方便选择 */
.left-nav {
  flex-basis: 300px;
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
  /* 纵向内容溢出时自动显示滚动条 */
  overflow-y: auto;
  /* 禁止横向滚动 */
  overflow-x: hidden;
}

/* 补充媒体查询适配，小屏幕下允许换行 */
@media (max-width: 800px) {
  .flex-container {
    flex-wrap: wrap;
    height: auto;
    overflow: visible;
  }
  .flex-item-right, .flex-item-left {
    flex: 100%;
  }
  .left-nav {
    max-height: 500px;
  }
}

2. HTML部分调整

给左右两个盒子加上对应的类名，匹配CSS选择器，把行内样式移到CSS中更易维护：

<!-- 左侧导航栏 -->
<div class="left-nav flex-item-left">
  <input type="text" id="myInput" onkeyup="myFunction()" placeholder="Search for a season or episode...">
  <!-- 剩余导航内容保持不变 -->
</div>

<!-- 右侧主内容区 -->
<div class="flex-item-right" style = "flex-grow: 2; box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);">
  Box 2
</div>