Height of relative div is 100% until I actually set height: 100%

Question

Setup

 .container { position: relative; display: flex; flex-direction: row; justify-content: flex-start; flex: 1 1; padding: 28px; width: 100%; background-color: #eee; }.bar { position: relative; width: 5px; background-color: blue; }

 <div class="container"> <div class="bar"></div> <div> lskdjf </div> </div>

Notice that the blue bar reaches the full height of the container, minus the padding.

If I add height: 100% to the .bar class however, the height disappears.

.bar {
  position: relative;
  width: 5px;
  background-color: blue;
  height: 100%;
}

Question

I imagine that actually setting height to 100% confuses the browser because the parent doesn't actually have a height that is set, but what property pre-setting-height-to-100% allows the height to then be 100%? And, given that this is actually my goal, would it be "correct" to just not specify 100%, or is there a better way to ensure the .bar element reaches the full height?

Answer 1

This is due to the stretch default alignment applied to flexbox container that make all the element stretched to fit their parent height.

 .container { position: relative; display: flex; flex-direction: row; justify-content: flex-start; flex: 1 1; padding: 28px; width: 100%; background-color: #eee; }.bar { position: relative; width: 5px; background-color: blue; }

 <div class="container"> <div class="bar"></div> <div> lskdjf </div> </div>

If the cross size property of the flex item computes to auto , and neither of the cross-axis margins are auto, the flex item is stretched . Its used value is the length necessary to make the cross size of the item's margin box as close to the same size as the line as possible, while still respecting the constraints imposed by min-height/min-width/max-height/max-width. ^ref

If you change the alignment this will no more happen

 .container { position: relative; display: flex; flex-direction: row; justify-content: flex-start; flex: 1 1; padding: 28px; width: 100%; background-color: #eee; align-items:flex-start; }.bar { position: relative; width: 5px; background-color: blue; }

 <div class="container"> <div class="bar"></div> <div> lskdjf </div> </div>

And if you set any value of height, the size will no more be auto considering the above specification so the stretch will no more apply and you will fall into the issue of percentage height that will make the height fall to auto because the parent height is not explicitely set.

Specifies a percentage height. The percentage is calculated with respect to the height of the generated box's containing block. If the height of the containing block is not specified explicitly (ie, it depends on content height), and this element is not absolutely positioned, the value computes to 'auto'. ^ref