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?

The bar disappears because there is not content inside it. What exactly bar should do? — Elman Huseynov, Apr 09 '20 at 16:55
jsFiddle is blocked for me. Please put a [mcve] in your question — j08691, Apr 09 '20 at 16:56
@ElmanHuseynov the bar actually has an absolutely-positioned clickable panel inside of that, but it seemed unrelated to the question at hand. — wheresmycookie, Apr 09 '20 at 17:53
@j08691, it looks like somebody has beat me to this. Thank you Azametzin, and I'll be sure to do that for future questions. — wheresmycookie, Apr 09 '20 at 17:54
its because height is relative to height of elements inside the div — Stanley, Apr 09 '20 at 17:57

Temani Afif · Accepted Answer · 2020-04-09T19:56:46.340

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 (i.e., it depends on content height), and this element is not absolutely positioned, the value computes to 'auto'. ^ref

Thank you Temani! This is informative - suppose I did want to specify an alignment other than the default, say `align-items: flex-start`? As expected, when I set this on the parent, the blue line disappears. What would be the correct way to set the height to be the parent height? — wheresmycookie, Apr 09 '20 at 19:52
@wheresmycookie either adjust the alignment of only the element by adding `align-self: stretch;` to it or you need to consider position: absolute on it — Temani Afif, Apr 09 '20 at 19:54

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

Setup

Question

1 Answers1