为何HTML <textarea>不遵循flex-grow属性，而<div>却可以？

• textarea属于替换元素，这类元素自带浏览器预设的内在尺寸（默认由cols属性控制宽度，rows控制高度）。在flex布局中，当设置flex-grow:1时，替换元素的flex-basis:auto会优先采用自身的内在宽度作为基础尺寸，不会自动收缩去参与容器剩余空间的分配，所以无法像div那样扩展。
• div是非替换元素，它没有预设的内在固定尺寸，flex-basis:auto会基于容器的可用空间计算基础尺寸，因此能正常响应flex-grow:1规则，填充容器的剩余空间。

解决方法 #

如果想让textarea也能按flex-grow扩展，只需给它添加flex-basis: 0或者width: 0，强制它以0作为基础尺寸参与剩余空间分配：

div, textarea {
  display: block;
  flex-grow:1;
  flex-basis: 0; /* 新增这行 */
  background: red;
  margin-left: 32px;
}

内容的提问来源于stack exchange，提问作者run_the_race