Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

How to add scrollbar to parent div in html css?

Tags:

html

css

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.

like image 750
Subrato Pattanaik Avatar asked Dec 31 '22 18:12

Subrato Pattanaik


1 Answers

.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>
like image 180
About7Codes Avatar answered Jan 08 '23 21:01

About7Codes