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.
.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>
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With