Flexbox column布局下textarea与footer在Firefox中表现异常

这个问题我之前也碰到过，本质是flex布局结合textarea元素时，不同浏览器对「最小高度约束」的处理逻辑差异导致的，具体拆解如下：

问题根源分析 #

你的布局是一个固定高度（100px）的垂直flex容器.container，内部包含两个子项：

• .textarea：设置flex-grow:1，理论上应该占满容器剩余空间（100px - 40px = 60px）
• .footer：固定高度40px

在Firefox中，flex子项（这里是.textarea）默认会严格遵循内部元素的最小高度约束。而textarea元素在Firefox中有一个默认的min-height值（即使你没显式设置），当这个默认最小高度加上textarea的上下padding（5px*2=10px）后，总高度超过了.textarea本该分配到的60px，就会强制撑开.textarea的高度，进而挤压.footer的空间，导致footer被压缩到约35px。

而Chrome的处理逻辑更灵活：它允许flex子项的高度被压缩到小于内部元素的默认min-height，所以.textarea能乖乖占据60px，.footer也能保持40px的设定。

解决方法 #

只需要给.textarea添加min-height: 0，打破它的最小高度约束，就能让flex布局正常分配高度，两个浏览器表现一致：

.textarea{
  flex-grow:1;
  display:flex;
  min-height: 0; /* 关键修复属性 */
}

或者也可以直接给textarea元素添加min-height: 0，效果是一样的：

textarea{
  flex-grow: 1;
  border: none;
  resize: none;
  padding: 5px;
  font-size: 16px;
  margin: 0px;
  display: block;
  min-height: 0; /* 同样生效 */
}

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