CODEWITHSUNDEEP
htmlcsstwitter-bootstrap
Steve
Steve

Reputation: 14912

Overflow-y scroll in a nested div?

I have a container div with 2 columns. I need to set the container at a percentage of the view, so I used 75vh.

Inside the left column is a bootstrap panel and a lot of content. I want that div to scroll when it doesn't fit, and it refuses. I realize I must be missing something simple.

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>

Upvotes: 0

Views: 95

Answers (2)

Frederick Jaime
Frederick Jaime

Reputation: 169

As Coleman mentioned, it was just a matter of adding the max-height:

.left-pane {
  overflow-y: scroll;
  border: 1px solid #0f0;
  max-height: 75vh;

}

here is link: http://codepen.io/Keinchy/pen/ONomZz

Upvotes: 1

Coleman
Coleman

Reputation: 422

I think the issue here is that the panel doesn't have a max-height and can just keep getting bigger, therefore it won't scroll.

I got it working by adding max-height: 75vh; to .left-pane.

If you mean't you want the whole container to scroll, just make that height to max-height.

Upvotes: 1

Related Questions