在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

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

更具体地说，这些是flex项的初始设置:

• min-width: auto(适用于flex-direction: row)
• min-height: auto(适用于flex-direction: column)

更具体地说，看一下规范语言:

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

为伸缩项提供一个更合理的默认最小大小规范引入了一个新的auto值作为的初始值min-width和min-height属性定义在css2.1 .

auto

对于overflow为visible的伸缩项，当在伸缩项目的主轴最小大小属性上指定，指定一个自动最小尺寸。否则计算为0。

也就是说，最小尺寸算法只适用于主轴。

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

同样的事情发生在第三个输入，这是一个嵌套的flex容器与flex-direction: column的子…除外，此列向容器也是flex-direction: row大容器的伸缩项。

这意味着嵌套容器的主轴是水平的，min-width: auto适用。因此，此伸缩项将不会收缩到输入的固有宽度以下。如需说明，请参见上述相同的演示。

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

由于上面解释的原因，第四个输入，包含在嵌套的行方向伸缩容器中，也需要重写min-width: auto(演示)。

相关:为什么't flex项目收缩超过内容大小?