为何Flexbox默认stretch属性未生效？flex-grow用法是否有误？

首先明确一个核心概念：Flexbox 默认的 align-items: stretch 是作用于交叉轴的对齐规则，而非你需求中的主轴方向拉伸。你想用 flex-grow 实现主轴拉伸的思路是对的，但代码里有两个关键问题导致效果未达预期：

1. 水平布局（row）输入框未拉伸 #

input 这类表单控件自带浏览器默认宽度样式，即使设置了 flex-grow: 1，默认宽度会限制它的拉伸范围。只需给 .item1 额外添加 width: 0，就能让 flex-grow 完全生效，让输入框占满容器水平空间：

.item1 {
  flex-grow: 1;
  flex-shrink: 0;
  width: 0; /* 打破表单元素默认宽度限制 */
}

2. 垂直布局（column）文本域未拉伸 #

垂直布局的容器 .container2 没有设置高度，它的高度默认由子元素内容决定，导致 flex-grow: 1 没有可拉伸的剩余空间。你需要给容器设置明确高度（比如固定高度或继承父容器高度），同时给 textarea 添加 min-height: 0 打破它的默认高度限制：

.container2 {
  display: flex;
  flex-direction: column;
  height: 200px; /* 可根据需求调整，也可用 height: 100%（需确保父元素有高度） */
}

.item2 {
  flex-grow: 1;
  flex-shrink: 0;
  min-height: 0; /* 打破textarea默认高度限制 */
}

完整修正代码 #

CSS #

.container1 {
  display: flex;
  flex-direction: row;
  margin-bottom: 10px;
}

.item1 {
  flex-grow: 1;
  flex-shrink: 0;
  width: 0;
}

.container2 {
  display: flex;
  flex-direction: column;
  height: 200px;
}

.item2 {
  flex-grow: 1;
  flex-shrink: 0;
  min-height: 0;
}

HTML #

<div class="container1">
  <input type="text" class="item1" placeholder="placeholder"/>
</div>
<div class="container2">
  <textarea class="item2"></textarea>
</div>

补充说明 #

• flex-grow 的作用是分配容器主轴方向的剩余空间，所以必须保证容器在主轴方向有足够的可分配空间（水平容器要有宽度，垂直容器要有高度）。
• 表单元素的浏览器默认样式是常见的 Flexbox 拉伸干扰源，通过 width: 0（水平场景）或 min-height: 0（垂直场景）可以快速解决这类问题。

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