Css 为什么可以'；该文本区域是否假定其父对象在Chrome中的完整高度？

考虑下一页，它显示了一行文本，下面有一个

*{
框大小：边框框；
}
html，正文{
身高：100%；
保证金：0；
}
.外部{
背景色：#eee；
显示器：flex；
弯曲方向：立柱；
身高：100%；
填充：10px；
}
.扩大{
柔性生长：1；
}
文本区{
身高：100%；
宽度：100%；
}

漂亮的文字墙。

*{
框大小：边框框；
}
html，正文{
身高：100%；
保证金：0；
}
.外部{
背景色：#eee；
显示器：flex；
弯曲方向：立柱；
身高：100%；
填充：10px；
}
.扩大{
弹性：1；
}
文本区{
身高：100%；
宽度：100%；
}

漂亮的文字墙。

尝试更改此选项：

.expand {
  flex-grow: 1;
}

到

---

您的

.expand

div实际上按预期工作。它占据父对象的剩余高度

*{
框大小：边框框；
}
html，正文{
身高：100%；
保证金：0；
}
.外部{
背景色：#eee；
显示器：flex；
弯曲方向：立柱；
身高：100%；
填充：10px；
边框：2个红色虚线；
}
.扩大{
柔性生长：1；
边框：2个蓝色虚线；
}
文本区{
身高：100%；
宽度：100%；
}

漂亮的文字墙

CSS的块宽度/高度概念为“”或“不确定”；基本上

百分比需要有一个确定的长度来解决，并且Chrome不考虑Flex项<代码>确定< /代码>，在这种情况下，与当前规格

相反。 这里有两个简单的修复方法：要么将

flex basis

设置为

（当它是唯一可以增长的flex项时，实际上它的长度并不重要，它不能是

none

或

auto

的其他值，因此

flex basis:0

可以正常工作），要么给它一个确定的高度（同样，这并不重要，因此

height:0

可以正常工作）

---

或者，您可以将

.expand

本身作为一个flexbox，其中包含

textarea

子级扩展，以填充父级，正如其他答案所建议的那样。

我有点困惑；您想知道为什么如果没有父级上的

flex grow:1

，它不会扩展到全高？@TylerH它不会使用

flex grow:1在父级上设置。啊，它一直正常工作，直到您手动调整它的大小为止，至少在Firefox.IIRC中，手动调整它的大小后，自动调整不再发生。@TylerH，是的，您是对的。FF/Edge中不存在这个问题。我回答的第二部分详细介绍了这一点。事实上，考虑到您的评论当然，这篇文章甚至可能是重复的。
.expand {
  flex: 1;
}