div with 100% height and display: grid doesn't do what I expect

Question

My desired layout is a box center in the HTML body with 50% height (50vh) and width, with two equal width columns, and if the content in either column becomes larger than its own height, a vertical scrollbar is shown.

I have the following fiddle. The left column in the display: grid div has id #col1. What I noticed is that if I set its height to 100% then its height will grow to fit the text within it.

I don't understand why. I'm saying that #gridContainer has a height of 100% of its parent #flexContainer. So shouldn't giving #col1 a height of 100% have it match its parent #gridContainer?

I notice that if I change display: grid to display: block in the #gridContainer selector, I will get the vertical scroll bars whether I give #col1 the height: 100% rule or not.

Is this something to do with how css-grid interacts with the height css property that I'm not getting?

i say what i want in the first paragraph. i can leave out 100% height in #col1 and that seems to have the effect i want, but I have no idea why that works. so i want to know what is going on. — Alex Bollbach, Sep 06 '17 at 01:57
so you want to know that how that scrolling part has done ? in the first col...am I right — Ashish sah, Sep 06 '17 at 01:58
...Can't you just apply `overflow: scroll;` to `#col2` as well? https://jsfiddle.net/mxubxpn7/ — Obsidian Age, Sep 06 '17 at 02:03
This is not really an issue of `height`. It's more an issue of `overflow`. Notice that if you disable `overflow` on `#col1`, the box stretches to full height, *with or without `height: 100%`*. https://jsfiddle.net/s5ygyvfw/7/ — Michael Benjamin, Sep 06 '17 at 03:41
Here's the explanation: https://stackoverflow.com/q/43311943/3597276 — Michael Benjamin, Sep 06 '17 at 03:42

score 0 · Answer 1 · answered Sep 06 '17 at 02:02

0

You have set a 50% parent height and under that, your col1 is having 50% height. so your css

#col1 {
overflow: scroll;
width: 100%;
//height: 100%;
background-color: red;
}

Your division has 50% height and you have used overflow:scroll so whenever the content size increases mor than 50% in compared to parent then the scroll bars appers. Thats all going on here.

answered Sep 06 '17 at 02:02

Ashish sah

755
9
17

If you want the second one to be the same just use ```overflow:scroll``` have a look on this : https://jsfiddle.net/mxubxpn7/ – Ashish sah Sep 06 '17 at 02:08
yes but uncomment the height: 100%. if you do the scroll bar doesn't appear. thats what i was confused about. – Alex Bollbach Sep 06 '17 at 02:11
Is working with ```height: 200px;``` . I think that the div is taking the 100% of the whole body there may be some cause because you have used flex so it's just going out of the box – Ashish sah Sep 06 '17 at 02:29
but i would have thought that 100% is of its parent div which is `#gridContainer`. `#gridContainer` is 100% of its parent, `#flexContainer` which is `50vh`. so thats why i'd think it should be 50% of the height of body. somehow either the flex logic, or css-grid logic is overriding that assumption. only i don't know enough to know which. – Alex Bollbach Sep 06 '17 at 02:33
Basically, its better to give height to a parent div rather than the div you want to ```overflow``` because the overflow is taking the size as per the content inside...I mean 50% of the content size. – Ashish sah Sep 06 '17 at 02:36
But the more chances are that you are using ```flex``` and that I feel is creating a problem just carry out your stuff in another way like using ```float``` or by using ```height``` as a permanent height. there are many ways. – Ashish sah Sep 06 '17 at 02:39
isn't float outdated? – Alex Bollbach Sep 06 '17 at 03:46

div with 100% height and display: grid doesn't do what I expect

1 Answers1