最小寬度渲染在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 ）。

相關： 為什么彈性項目不能縮小到超過內容大小？