为什么此文本区域不能在 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 元素占据页面的剩余高度。但是，尽管在 textarea 上设置了 height: 100%;，但它拒绝占据其父项的全部高度。

为什么这不起作用，我怎样才能使文本区域填充其父项？

Answer 1

* {
  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: 1;
}

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

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

.expand {
  flex: 1;
}

Answer 2

尝试改变这个：

.expand {
  flex-grow: 1;
}

到

.expand {
  flex: 1;
}

Answer 3

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

* {
  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%。

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

最简单和最有效的解决方案是去掉 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>

Answer 4

CSS 有块的概念 width/height 为“definite” 或 "indefinite"；基本上 .

百分比需要有一个确定的长度来解决，并且 Chrome 在这种情况下不考虑弹性项目 definite，这与当前规范相反。

这里有两个简单的修复方法：要么将 flex-basis 设置为 <length>（当它是唯一可以增长的弹性项目时，它的长度实际上并不重要，它只是不能是 none 或 auto 的其他值，所以 flex-basis: 0 可以正常工作），或者给它一个确定的高度（同样没关系，所以 height: 0 工作正常）。

或者，您可以使 .expand 本身成为一个 flexbox，其中 textarea 子级扩展以填充父级，正如其他答案之一所建议的那样。

为什么此文本区域不能在 Chrome 中假设其父项的全高？

Why can't this textarea assume the full height of its parent in Chrome?

css

textarea

google-chrome

flexbox