0

For example, in the fiddle below, I have a single flex div.

It appears that setting the height to 100% has no effect on the div.

A div is display block by default and takes up 100% of the width. But obviously the height behaves differently.

https://jsfiddle.net/02wtuzjp/1/

#expand{
  display: flex;
  height: 100%;
  border: 1px solid red;
}
<div id = 'expand'>
</div>

This appears to be expected behavior as there is not content in the div.

https://css-tricks.com/almanac/properties/h/height/

One solution is to use the units vh or more particularly 100vh.

I'm not sure it this is the proper or best way, however.

user17331023
  • 51
  • 6

1 Answers1

0

An element with a percentage based height, needs a parent reference for it to base its height on. You can add:

html, body {
    height: 100%;
}

And your element will be 100% of the height:

html,
body {
  height: 100%;
}

#expand {
  display: flex;
  height: 100%;
  border: 1px solid red;
}
<div id="expand">
</div>

Per your edit: You can certainly use 100vh to set the height, but then that element will always be 100 percent of the height of the viewport..no matter it's containing element.

For example:

#random {
  height: 50px;
}

#expand {
  display: flex;
  height: 100vh;
  border: 1px solid red;
}
<div id="random">
</div>
<div id="expand">
</div>

You can see that the height of your expand element is 100vh tall and creates a scroll because the height is the height of viewport, not the remaining space.

Resources: Article on Medium

disinfor
  • 10,865
  • 2
  • 33
  • 44
  • That is cool, I posted a link by css-tricks, which just confused me more obviously. Can you relate your answer to the link I posted in the Q edit. – user17331023 Dec 10 '21 at 18:39
  • I've noticed this behavior while developing but have not seen it referenced anywhere. Can you provide a web reference - mdn, stack overflow, etc. – user17331023 Dec 10 '21 at 18:40
  • @user17331023 the link to the `parent reference` in my answer is the MDN. If you read under the `` heading you'll see that it talks about the `containing element`. I know there's more info out there. I'll add it. – disinfor Dec 10 '21 at 18:43