html - 在嵌套的 div 中溢出滚动？

Question

我有一个包含 2 列的容器 div。我需要将容器设置为 View 的百分比，因此我使用了 75vh。

左侧栏内是一个 Bootstrap 面板和很多内容。我希望那个 div 在不适合时滚动，但它拒绝了。我意识到我一定遗漏了一些简单的东西。

http://codepen.io/smlombardi/pen/ONoWQd

CSS:

  .container {
    border: 1px solid #000;
    width: 80vw;
    height: 75vh;
    .left-pane {
      overflow-y: scroll;
      border: 1px solid #0f0;
      height: 100%;
    }
    .right-pane {
      background-color: #ccc;
    }

  }

HTML:

<div class="container">
  <div class="row">
    <div class="col-md-7 left-pane">
      <div class="panel panel-default">
          Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla vitae elit libero, a pharetra augue. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Integer posuere erat a ante venenatis dapibus posuere velit aliquet.

Curabitur blandit tempus porttitor. Nulla vitae elit libero, a pharetra augue. Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Nulla vitae elit libero, a pharetra augue. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Nullam id dolor id nibh ultricies vehicula ut id elit.

Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Nulla vitae elit libero, a pharetra augue. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum.

Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Aenean lacinia bibendum nulla sed consectetur. Nullam id dolor id nibh ultricies vehicula ut id elit. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Vestibulum id ligula porta felis euismod semper. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.

      </div>

    </div>
    <div class="col-md-5 right-pane"></div>
  </div>
</div>

Answer 1

我认为这里的问题是面板没有 max-height 并且可以不断变大，因此它不会滚动。

我通过将 max-height: 75vh; 添加到 .left-pane 来让它工作。

如果您的意思是您不想让整个容器滚动，只需将 height 设置为 max-height。