为什么内部 div 没有占用父 div 的 100%？

Question

下面的示例演示了这种奇怪的行为：outer div 有一个固定大小，我想要 inner div 取该大小的 100%（即最终结果应该只是一个内部红色块完全覆盖外部蓝色块）。

我已经将 inner div 的高度设置为 100% 但它的高度仍然是 0px，但是，我设置的 100% 宽度可以正常工作, 它计算到 300px，这是其父级 div).

的 100%

首先，为什么 100% 高度不起作用？二、如何让100%高度生效？

.full {
  background: yellow;
  display: flex;
  height: 100%;
  width: 100%;
  position: absolute;
  justify-content: center;
  align-items: center;
}

.outer {
  background: blue;
  min-height: 100px;
  min-width: 300px;
}

.inner {
  background: red;
  height: 100%;
  width: 100%;
}

<div class="full">
  <div class="outer">
    <div class="inner"></div>
  </div>
</div>

Answer 1

在内部 <div> 上尝试 flex-grow: 1。

Answer 2

当 parent 高度由 min-height/max-height children 确定时，百分比高度大小不正确，这是一个错误。

只需使用其他一些方法来分配高度，可以是固定的，也可以使用 flex 或其他方法。在下面的示例中，我将 display:flex; 添加到 parent 并将 flex: 1; 添加到 child:

.full {
  background: yellow;
  display: flex;
  height: 100%;
  width: 100%;
  position: absolute;
  justify-content: center;
  align-items: center;
}

.outer {
  background: blue;
  min-height: 100px;
  min-width: 300px;
  display: flex;
  flex-direction:column;
}

.inner {
  background: red;
  height: 100%;
  width: 100%;
  flex:1;
}

<div class="full">
  <div class="outer">
    <div class="inner"></div>
  </div>
</div>

注：

flex 属性是 shorthand 属性用于：flex-grow、flex-shrink、flex-basis。而设置flex: 1;实际上赋值为flex-grow1，flex-basis0.
因为 flex-direction 默认是行，而且我们在 child 元素中使用 flex: 1 并且我们需要它垂直增长（按列方向）。我们必须分配 flex-direction: column;

为什么内部 div 没有占用父 div 的 100%？

Why inner div is not taking 100% of parent div?

html

css

layout