为什么这个 textarea 不能假设它在 Chrome 中的父级的全部高度？答案

【问题标题】：Why can't this textarea assume the full height of its parent in Chrome?为什么这个 textarea 不能假设它在 Chrome 中的父级的全部高度？
【发布时间】：2018-02-23 20:42:08
【问题描述】：

考虑以下页面，该页面显示一行文本，其下方带有 <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%;，但它拒绝占据其父级的全部高度。

为什么这不起作用？如何让 textarea 填充其父级？

【问题讨论】：

我有点困惑；你想知道为什么它不会在父级没有 flex-grow: 1 的情况下扩展到全高？
@TylerH 它不会扩展 with flex-grow: 1; 在父级上设置。
啊，它正在正常工作，直到您手动调整它的大小，至少在 Firefox 中是这样。 IIRC，手动调整大小后不再自动调整。
stackoverflow.com/q/33636796/3597276

标签： css google-chrome flexbox textarea

【解决方案1】：

您的.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（更完整的解释here 和@987654322 @)。

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

【讨论】：

@TylerH，是的，你是对的。 FF / Edge中不存在该问题。我的回答中的第二个link reference 详细介绍了这一点。事实上，考虑到您的评论，这篇文章甚至可能是重复的。

【解决方案2】：

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

【讨论】：

【解决方案3】：

尝试改变这一点：

.expand {
  flex-grow: 1;
}

到

.expand {
  flex: 1;
}

【讨论】：

【解决方案4】：

CSS 有一个块宽/高的概念为“definite”或“不定”；本质上。

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

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

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

【讨论】：