为什么这个文本区域不能在 Chrome 中采用其父级的完整高度？

Question

考虑以下页面，该页面显示一行文本，<textarea>其下方带有 。

* {
  box-sizing: border-box;
}

html, body {
  height: 100%;
  margin: 0;
}

.outer {
  background-color: #eee;
  display: flex;
  flex-direction: column;
  height: 100%;
  padding: 10px;
}

.expand {
  flex-grow: 1;
}

textarea {
  height: 100%;
  width: 100%;
}

<div class="outer">
  <p>
    Nice little wall of text.
  </p>
  <div class="expand">
    <textarea></textarea>
  </div>
</div>

预期的行为是让文本区域占据文本行下方页面的剩余高度。使用flexbox，我可以使.expand元素占据页面的剩余高度。然而，尽管已height: 100%;设置在文本区域上，但它拒绝占据其父级的完整高度。

为什么这不起作用以及如何使文本区域填充其父级？

Answer 1

您的.expanddiv 实际上按预期工作。它占据了父级的剩余高度。

* {
  box-sizing: border-box;
}

html, body {
  height: 100%;
  margin: 0;
}

.outer {
  background-color: #eee;
  display: flex;
  flex-direction: column;
  height: 100%;
  padding: 10px;
  border: 2px dashed red;
}

.expand {
  flex-grow: 1;
  border: 2px dashed blue;
}

textarea {
  height: 100%;
  width: 100%;
}

<div class="outer">
  <p>Nice little wall of text.</p>
  <div class="expand">
    <textarea></textarea>
  </div>
</div>

但是，textarea是 的子级.expand，并且您已将其设置为height: 100%。

由于百分比高度通常基于父级的指定高度，并且height上没有定义.expand，因此textarea高度计算为（此处和此处auto有更完整的解释）。

最简单、最有效的解决方案是去掉 的百分比高度textarea并赋予父级display: flex，它会自动应用于align-items: stretch子级。

* {
  box-sizing: border-box;
}

html, body {
  height: 100%;
  margin: 0;
}

.outer {
  background-color: #eee;
  display: flex;
  flex-direction: column;
  height: 100%;
  padding: 10px;
  border: 2px dashed red;
}

.expand {
  flex-grow: 1;
  border: 2px dashed blue;
  display: flex;
}

textarea {
  width: 100%;
}

<div class="outer">
  <p>
    Nice little wall of text.
  </p>
  <div class="expand">
    <textarea></textarea>
  </div>
</div>