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/

如果缩小屏幕尺寸，第3行不会像其他行一样反应。

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

但令我烦恼的是使用我不理解的东西^^。

如果有人可以向我解释为什么会出现错误，为什么会修复错误，以及是否有更好的方法来避免这个问题，那就太棒了。

Answer 1

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

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

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

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

4.5. Implied Minimum Size of Flex Items

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

<强> auto

在主轴上overflow为visible的弹性项目上，何时   在flex项的主轴min-size属性上指定，指定一个   自动最小尺寸。否则计算为0。

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

在这些情况下，列方向容器中的输入元素不会获得min-width: auto - because the main axis is vertical - 因此它们会收缩并且不会溢出容器。您可以在第二个输入元素上看到此行为。查看此demo时缩小屏幕尺寸。

同样的事情发生在第三个输入，它是嵌套的Flex容器的子项flex-direction: column ... EXCEPT ，此列方向container也是flex-direction: row的较大容器的flex项。

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

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

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

相关：Why doesn't flex item shrink past content size?

弹性方向的最小宽度渲染方式：行和弯曲方向：列

1 个答案: