Overflow-y scroll in a nested div?

Question

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>

How do you have this much rep and still not know that questions asking to debug code require an minimal reproducible example in the question? — cimmanon
– cimmanon, Commented Apr 25, 2016 at 23:52
The code pen wasn't sufficient? I was having a rough day, sorry. — Steve
– Steve, Commented Apr 25, 2016 at 23:54

Coleman · Accepted Answer · 2016-04-25 21:07:26Z

1

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.

answered Apr 25, 2016 at 21:07

Coleman

4222 silver badges11 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Frederick Jaime · Accepted Answer · 2016-04-26 00:04:47Z

1

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

answered Apr 26, 2016 at 0:04

Frederick Jaime

1692 silver badges6 bronze badges

Collectives™ on Stack Overflow

Overflow-y scroll in a nested div?

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related