5

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.

Improve this question

5 Answers 5

Reset to default
3 

.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>

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

Comments

2

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

enter image description here

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

enter image description here

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

Improve this answer

4 Comments

I want to justify the statement "If 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." This statement is written in w3 school site w3schools.com/cssref/pr_dim_height.asp
ok understood if the child's height is greater than the parent's div then it will overflow. The scrolling bar behavior can be achieved by the overflow property of css. I was assuming before that scroll bar will automatically appear if child's height exveeds.
@SubratoPatnaik Please check the edited answer
oh sorry, I read it wrongly. Yes, you are right by default overflow: visible. Also in W3 school site it is mention the same thing. I didn't read properly before. I can say now you have justified properly. Now I am a little bit confident on height and overflow property.
2

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>

Improve this answer

Comments

1

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/

Improve this answer

Comments

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>

Improve this answer

Comments

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.