html - 在我实际设置高度 : 100% 之前，相对 div 的高度为 100%

Question

设置

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

请注意，蓝色条达到容器的完整高度，减去填充。

但是，如果我将 height: 100% 添加到 .bar 类，高度就会消失。

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

问题

我想实际上将高度设置为 100% 会使浏览器感到困惑，因为父级实际上没有设置高度，但是什么属性 pre-setting-height-to-100% 允许高度然后是 100% ？而且，考虑到这实际上是我的目标，不指定 100% 是否“正确”，或者是否有更好的方法来确保 .bar 元素达到完整高度？

Answer 1

这是由于应用于 flexbox 容器的拉伸(stretch)默认对齐方式使所有元素都拉伸(stretch)以适合其父级高度。

.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

如果你改变对齐方式，这将不会再发生

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

如果您设置任何高度值，考虑到上述规范，尺寸将不再自动调整，因此拉伸(stretch)将不再适用，您将陷入高度百分比问题，这将使高度下降到 auto 因为未明确设置父级高度。

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