最小宽度渲染在flex-direction：行和flex-direction：列上有所不同

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。 弹性项目的隐含最小大小

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

auto

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

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

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

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

这意味着嵌套容器的主轴是水平且min-width: auto应用。 结果，该弹性项目将不会收缩到输入的固有宽度以下。 有关示例，请从上方查看相同的演示 。

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

出于上述原因，嵌套行方向flex容器中包含的第四个输入也将需要具有min-width: auto覆盖（ demo ）。

相关： 为什么弹性项目不能缩小到超过内容大小？