How to add a scrollbar to an element inside an element with a scrollbar?

Question

I have a modal already with a scroll if the general content is longer than the modal height. But I need a div inside my modal with its own scroll. My problem is that I don't know the height of my modal because it is based on 30vh.

If I could simply set a static height for my inner div, that would be easier, but I can't.

My issue: I need to create an individual scroll for the right area.

.container {
  max-height: 30vh;
  border: 1px solid black;
  overflow-x: hidden;
  overflow-y: auto;
}

.header {
  border: 1px solid red;
}

.body {
  display: flex;
}

.leftArea {
  border: 1px solid green;
  width: 50%;
}

.rightArea {
  border: 1px solid blue;
  width: 50%;
  overflow-x: hidden;
  overflow-y: auto;
  /* height: ???; */
}

<div class="container">
  <div class="header">
    HEADER
  </div>
  <div class="body">
    <div class="leftArea">
      <p>left area</p>
      <p>left area</p>
      <p>left area</p>
      <p>left area</p>
      <p>left area</p>
      <p>left area</p>
      <p>left area</p>
      <p>left area</p>
      <p>left area</p>
    </div>
    <div class="rightArea">
      <p>right area</p>
      <p>right area</p>
      <p>right area</p>
      <p>right area</p>
      <p>right area</p>
      <p>right area</p>
      <p>right area</p>
      <p>right area</p>
      <p>right area</p>
      <p>right area</p>
      <p>right area</p>
      <p>right area</p>
      <p>right area</p>
      <p>right area</p>
      <p>right area</p>
      <p>right area</p>
      <p>right area</p>
      <p>right area</p>
    </div>
  </div>
</div>

Here is my example on CodePen.

I'm not sure how you want this to look. Scrolling happens when a div is bigger than its height, but in this case you have no limit on the height of rightArea. You could set rightArea to also have a height limit of 30vh? but in that case scrolling the rest of the div down will show rightArea is too small... eg: https://codepen.io/anon/pen/mKyBQO?editors=1100#0 — WilliamNHarvey, May 30 '18 at 17:07
thanks, @Asthmatic, it could work, but 30vh is the height of the whole modal. Note that I have a Header (and I could have even more elements in between). So my .rightArea should be less than the total height of the modal. Do you know what I mean? — Metarat, May 30 '18 at 17:12
what I mean is that for you to be able to scroll the whole modal if left area gets too big, but only scroll right area when it gets too big, you'll have to set a height on right area to constitute what "too big" is. — WilliamNHarvey, May 30 '18 at 17:13
I got your point. And I will take this approach if I don't find anything "perfect". I will reduce a bit the number of `vh` to be closer of my area size. I will still have some gap depending on the size of the header. But it works for now. Thanks — Metarat, May 30 '18 at 17:33

Michael Benjamin · Accepted Answer · 2018-05-31T03:00:11.913

In block layout you need fixed heights for the overflow property to work.

It's clear from this statement on MDN:

In order for overflow to have an effect, the block-level container must have either a set height (height or max-height) or white-space set to nowrap.

However, in flex layout this is less of an issue. An overflow condition can be triggered on a container with dynamic height.

So, switch the primary container from display: block (the default) to display: flex.

.container {
  max-height: 30vh;
  border: 1px solid black;
  overflow-x: hidden;
  overflow-y: auto;
  /* new */ display: flex;
  /* new */ flex-direction: column;
}

.header {
  border: 1px solid red;
}

.body {
  display: flex;
  /* new */ min-height: 0; /* see note below */
}

.leftArea {
  border: 1px solid green;
  width: 50%;
}

.rightArea {
  border: 1px solid blue;
  width: 50%;
  overflow: auto;
}

<div class="container">
  <div class="header">HEADER</div>
  <div class="body">
    <div class="leftArea">
      <p>left area</p>
      <p>left area</p>
      <p>left area</p>
      <p>left area</p>
      <p>left area</p>
      <p>left area</p>
      <p>left area</p>
      <p>left area</p>
      <p>left area</p>
    </div>
    <div class="rightArea">
      <p>right area</p>
      <p>right area</p>
      <p>right area</p>
      <p>right area</p>
      <p>right area</p>
      <p>right area</p>
      <p>right area</p>
      <p>right area</p>
      <p>right area</p>
      <p>right area</p>
      <p>right area</p>
      <p>right area</p>
      <p>right area</p>
      <p>right area</p>
      <p>right area</p>
      <p>right area</p>
      <p>right area</p>
      <p>right area</p>
    </div>
  </div>
</div>

jsFiddle demo

Note: You need to override the min-height: auto default for this layout to work on most browsers. The issue is explained here: Why don't flex items shrink past content size?

score 0 · Answer 2 · edited Jun 08 '18 at 04:31

Hi did not get the question properly.

But is this what you asked for?

.container {
  max-height: 70vh;
  border: 1px solid black;
  overflow-x: hidden;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
}

.header {
  border: 1px solid red;
}

.body {
  display: flex;
  flex-size: 1;
}

.leftArea {
  border: 1px solid green;
  width: 50%;
}

.rightArea {
  border: 1px solid blue;
  width: 50%;
  overflow-x: hidden;
  overflow-y: auto;
  /* height: ???; */
}

<div class="container">
  <div class="header">
    HEADER
  </div>
  <div class="body">
    <div class="leftArea">
      <p>left area</p>
      <p>left area</p>
      <p>left area</p>
      <p>left area</p>
      <p>left area</p>
      <p>left area</p>
      <p>left area</p>
      <p>left area</p>
      <p>left area</p>
    </div>
    <div class="rightArea">
      <p>right area</p>
      <p>right area</p>
      <p>right area</p>
      <p>right area</p>
      <p>right area</p>
      <p>right area</p>
      <p>right area</p>
      <p>right area</p>
      <p>right area</p>
      <p>right area</p>
      <p>right area</p>
      <p>right area</p>
      <p>right area</p>
      <p>right area</p>
      <p>right area</p>
      <p>right area</p>
      <p>right area</p>
      <p>right area</p>
    </div>
  </div>
</div>

I don't want to set up overflow for `.leftArea`, it is already ruled by the modal set up. Sorry if this is not clear, that's a hypothetical scenario. My goal is just to create a scroll for `.rightArea`. — Metarat, May 30 '18 at 17:15
https://codepen.io/anon/pen/rKaGKo?editors=1100 removing overflow from left should work then. — Vishnu Kyatannawar, May 30 '18 at 17:18

How to add a scrollbar to an element inside an element with a scrollbar?

2 Answers2

jsFiddle demo