最小宽度在 flex-direction: row 和 flex-direction: column 中呈现不同

Question

我有一个带有display: flex和的容器flex-direction: row。

在那个容器中有一个子容器，也带有display: flex但带有flex-direction: column。

问题是如果我在子容器中添加一个输入min-width，该输入的 将被忽略。

这是我在 flexbox 中尝试几种输入情况的代码：

form {
  margin: 100px;
}
div.flex_ctn {
  display: flex;
}
input {
  flex: 1;
  min-width: 40px;
}
div.column {
  flex-direction: column;
}
div.row {
  flex-direction: row;
}
div.sub_ctn {
  flex: 1;
  /*min-width:40px;*/
}

<form>
  <div class="flex_ctn row">
    <input />
  </div>
  <div class="flex_ctn column">
    <input />
  </div>
  <div class="flex_ctn row">
    <div class="flex_ctn column sub_ctn">
      <input />
    </div>
  </div>
  <div class="flex_ctn column">
    <div class="flex_ctn row sub_ctn">
      <input />
    </div>
  </div>
</form>

https://fiddle.jshell.net/s3gu32ku/2/

如果减小屏幕尺寸，第三行不会像其他行那样反应。

在 css 中，您将看到最后一行设置为注释。启用该部分后，您只需重新加载，问题就会消失。非常完美 ！我有解决办法！

但这让我烦恼使用我不明白的东西^^。

如果有人可以向我解释为什么会发生该错误，为什么该行修复它，以及是否有更好的方法来避免该问题，那就太好了。

Answer 1

一般来说，默认情况下，弹性项目不能小于其内容的大小。

更具体地说，这些是弹性项目的初始设置：

• min-width: auto（适用于flex-direction: row）
• min-height: auto（适用于flex-direction: column）

更具体地说，看看规范语言：

4.5. Flex 项目的隐含最小尺寸

为了为弹性项目提供更合理的默认最小尺寸，本规范引入了一个新auto值作为CSS 2.1 中定义的min-width和min-height属性的初始值。

auto

在柔性项，它overflow是visible在与主轴线，当在柔性项的主轴最小尺寸属性指定时，指定的自动最小尺寸。否则计算为0。

换句话说，最小尺寸算法仅适用于主轴。

列方向容器中的输入元素不会得到min-width: auto-因为在这些情况下主轴是垂直的- 所以它们会缩小并且不会溢出容器。您可以在第二个输入元素上看到这种行为。观看此演示时缩小屏幕尺寸。

同样的事情发生在第三个输入上，它是一个带有flex-direction: column...的嵌套 flex 容器的子元素，这个列方向容器也是一个带有 的较大容器的 flex 项flex-direction: row。

这意味着嵌套容器的主轴是水平的并且min-width: auto适用。因此，这个 flex 项目不会缩小到输入的固有宽度以下。有关说明，请参阅上面的相同演示。

因此，您需要使用min-width: 0or overflow: hidden( demo )覆盖此默认值。

由于上面解释的原因，包含在嵌套行方向 flex 容器中的第四个输入也需要min-width: auto被覆盖（demo）。

相关：为什么 flex item 不缩小超过内容大小？