How to add scrollbar to parent div in html css?

Question

I want to add a vertical scrollbar to the parent div as the child's height is much greater than the parent div height in the below setup. I have read in W3 school that by default overflow: auto; so it will add scrollbar if child div's height exceeds the parent div's. But the below setup doesn't justify it. Help me to understand on this.

According to W3 school CSS doc,

If the height is set to a numeric value (like pixels, (r)em, percentages) then if the content does not fit within the specified height, it will overflow. How the container will handle the overflowing content is defined by the overflow property.

How can we justify the above statement?

.parentDiv {
  background-color: coral;
  height: 50px;
  width: 200px;
}

.childDiv {
  background-color: crimson;
  height: 100px;
  width: 200px;
}

<div class="parentDiv">
  <div class="childDiv">

  </div>
</div>

@Edited: By default overflow: visible;, it is not auto. I read that wrongly.

Answer 1

All of the current (as of Jan 28 2021) answers use a fixed height child element. While this may be what you want, I needed the child (and therefore parent) to consume all available height on the page, but, still be able to scroll the child.

If that is what other people want, then you can use flex + column to achieve that like this - obviously, you'll need to reduce the high of your browser to get the body to need to scroll (you can switch 'overflow-y: auto' to 'overflow-y: scroll' if you want a scroll control to always render):

html, body {
  height: 100%;
  margin: 0;
}

.header {
  background: green;
}

.scrollable-container {
  height: 100%;
  display: flex;
  flex-direction: column;
}

.scrollable-body {
  background: blue;
  padding: 10px;
  overflow-y: auto;  
}

<div class="scrollable-container">
  <div class="header">
    <h1>Header section</h1>
    <blockquote>What is it: Fixed header, scrollable body</blockquote>
  </div>
  <div class="scrollable-body">
    <ul>
      <li>a</li>
      <li>a</li>
      <li>a</li>
      <li>a</li>      
      <li>a</li>
      <li>a</li>
      <li>a</li>
      <li>a</li>
      <li>a</li>
      <li>a</li>      
      <li>a</li>
      <li>a</li>
      <li>a</li>
      <li>a</li>
      <li>a</li>
      <li>a</li>
      <li>a</li>
      <li>a</li>
      <li>a</li>
      <li>a</li>
      <li>a</li>
      <li>a</li>
    </ul>
  </div>
</div>

Answer 2

Can you please check the below code? Hope it will work for you.

We have set max-height and overflow-y: auto; overflow-x: hidden; in .parentDiv so when .childDiv height is more than .parentDiv will be scrollable otherwise scrollbar will automatically hide.

Here we have set max-height because when .childDiv height is less than .parentDiv height, then .parentDiv height will be set according to the .childDiv block height.

.parentDiv {
  background-color: coral;
  max-height: 50px;
  width: 200px;
  overflow-y: auto;
  overflow-x: hidden;
}

.childDiv {
  background-color: crimson;
  height: 100px;
  width: 200px;
}

<div class="parentDiv">
  <div class="childDiv">
  </div>
</div>

Please refer to this link: https://jsfiddle.net/yudizsolutions/ev4qou6c/2/

Answer 3

Use the max-height instead of width so if the child height is less than the parent it will apprar without the scroll else it will get max height and add overflow scroll

.parentDiv {
  background-color: coral;
  height: 50px;
  width: 200px;
}

.childDiv {
  background-color: crimson;
  max-height: 100px;
  width: 200px;
   overflow-y:scroll;
}

  
<div class="parentDiv">
  <div class="childDiv">
    <br>abc<br>def<br>ghi<br>jkl<br>mno
  </div>
</div>
<br><br><br>
   

<div class="parentDiv">
  <div class="childDiv">
    1 line
  </div>
</div>

Answer 4

It does make sense. The CSS code you have provided renders a page like this

Here width of both parent and child are same, so you are not able to observe the overflow Make a slight change to the width of the child so that the parent is visible like this

.parentDiv {
  background-color: coral;
  height: 50px;
  width: 200px;
}

.childDiv {
  background-color: crimson;
  height: 100px;
  width: 100px;
}

Now the output will be

As we can see the 'pink colored element' is the child which has a greater height property value than the parent is overflowing.

By default the overflow value is visible. So we can see the element overflowing the parent.

Because the child is overflowing the parent. We must define a overflow property on the parent.

As the document you have linked from w3 says, if the overflow property is set to auto, it will add a scrollbar if the content is overflowing

Here is a codepen demonstrating the same.

For better understanding I have altered the width and margin of the child.

Please let me know, If this justifies the statement

Answer 5

.parentDiv {
  background-color: coral;
  height: 50px;
  width: 200px;
  overflow-y: auto; /* new stuff */
}

.childDiv {
  background-color: crimson;
  height: 100px;
  width: 200px;
}

<div class="parentDiv">
  <div class="childDiv">

  </div>
</div>