如何实现内容区域滚动而非页面滚动？Bootstrap overflow-auto失效问题

你遇到的问题很常见——虽然Bootstrap的overflow-auto类确实能让元素内容溢出时显示滚动条，但它生效的前提是容器必须有明确的高度限制。你的黄色.scroll元素现在没有设置高度，它会自动撑开以适应内部内容，自然不会出现滚动条。

下面是具体的解决步骤：

• 给.scroll元素添加固定高度或者相对高度限制，比如用固定值height: 300px，或者用视口高度计算的相对值max-height: calc(100vh - 140px)（这个值可以根据你的header和其他元素高度调整）。
• 确保父元素（比如.content、main）的高度也被合理限制，避免它们跟着内容无限撑开。

修改后的完整代码示例：

* { padding: 1em; }
html, body { margin: 0; padding: 0; background-color: #0F0; height: 100%; }
nav { background-color: #F00; }
main { background-color: #FFF; height: 100vh; display: flex; flex-direction: column; }
.header { background-color: #07f; }
.content { background-color: #f7f; flex: 1; overflow: hidden; }
.scroll { background-color: #FD0; height: 100%; overflow-auto; }

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" rel="stylesheet"/>
<body>
  <div class="container p-0">
    <div class="row p-0">
      <nav class="col-md-2">Nav bar</nav>
      <main class="col-md-10">
        <div class="header">
          <b>Header</b>
        </div>
        <div class="content">
          <b>Title</b>
          <div class="scroll overflow-auto">
            <div class="E">1</div>
            <div class="E">2</div>
            <div class="E">3</div>
            <div class="E">4</div>
            <div class="E">5</div>
            <div class="E">6</div>
            <div class="E">7</div>
            <div class="E">8</div>
            <div class="E">9</div>
            <div class="E">10</div>
            <div class="E">11</div>
            <div class="E">12</div>
            <div class="E">10</div>
            <div class="E">11</div>
            <div class="E">12</div>
            <div class="E">10</div>
            <div class="E">11</div>
            <div class="E">12</div>
          </div>
        </div>
      </main>
    </div>
  </div>
</body>

这里的关键调整：

1. 给html, body设置height: 100%，确保根元素占满视口高度。
2. 让main使用flex布局，flex-direction: column，并设置height: 100vh，这样它的子元素可以按垂直方向分配空间。
3. .content设置flex: 1，让它占据main的剩余空间，同时overflow: hidden防止它超出父容器。
4. .scroll设置height: 100%，继承.content的高度，再配合overflow-auto，当内容超出时就会显示滚动条。

这样修改后，黄色区域就会独立滚动，而不会带动整个页面滚动了。

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