为何Input在Column Flex容器中无法自适应宽度？嵌套Flex可行

我做了两个示例测试column flex容器下的宽度自适应问题：

可行方案 #

HTML结构 #

<div class="content">
  <div class="inner-content">
    <input type="text">
  </div>
  <div class="inner-content">
    <input type="text">
  </div>
  <div class="inner-content">
    <input type="text">
  </div>    
</div>

CSS样式 #

.content {
  border: 2px solid green;
  flex: 0 1 auto;
  height: 200px;
  display: flex;
  flex-direction: column;
}

.inner-content {
  border: 2px dashed orange;
  flex: 1 1 auto;
  display: flex;
  justify-content: center;
  align-items: center;
}

input {
  min-width: 0px;
  width: 600px;
}

该方案在column flex容器（.content）内嵌套了row方向的flex容器（.inner-content），input可正确自适应宽度，缩放时不会溢出容器。

不可行方案 #

HTML结构 #

<div class="content">
  <input type="text">
  <input type="text">
  <input type="text">
</div>

CSS样式 #

.content {
  border: 2px solid green;
  flex: 0 1 auto;
  height: 200px;
  display: flex;
  flex-direction: column;
}

input {
  min-width: 0px;
  width: 600px;
  height: 35px;
  border: 2px dashed orange;
  flex: 0 1 auto;
  display: flex;
  justify-content: center;
  align-items: center;  
}

该方案直接将input作为column flex容器的子元素，input会溢出容器，无法自适应宽度缩放。

差异原因解析 #

核心问题在于flex容器的主轴与交叉轴尺寸约束规则不同：

• 当.content设置为flex-direction: column时，主轴为垂直方向，交叉轴为水平方向。column flex容器默认仅约束子元素的主轴（垂直）尺寸，交叉轴（水平）尺寸由子元素自身固有宽度决定，不会自动收缩适配容器——哪怕设置了min-width: 0，该属性仅作用于主轴方向的最小尺寸限制，对交叉轴无效。
• 第一个方案中嵌套的.inner-content是默认row方向的flex容器，主轴为水平方向。此时作为其子元素的input会受到row flex容器的主轴尺寸约束：当容器宽度小于input设置的宽度时，默认的flex-shrink:1会让input自动收缩，加上min-width:0打破了input的最小宽度限制，因此能正常实现宽度自适应缩放。

简单来讲，column flex不会主动管控子元素的水平宽度，而row flex会约束子元素的水平宽度，嵌套row flex相当于给input套了一层能管控水平尺寸的容器，自然就能实现宽度自适应。

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