為什麼彈性項目無法縮減至小於內容大小？

Question

我有4個flexbox列，一切都正常，但是當我向一列添加一些文字並將其設定為大字體大小時，由於flex屬性，它使得該列比應該更寬。

我嘗試使用word-break: break-word，它有所幫助，但是當我將列調整為非常小的寬度時，文本中的字母會被分成多行（每行一個字母），但是該列的寬度不會小於一個字母的大小。

觀看這個影片（在開始時，第一列最小，但是當我調整視窗大小時，它變成了最寬的列。我只想始終遵守flex設定；flex大小為1：3：4 ：4）

我知道，將字體大小和列填充設置為較小的值會有所幫助...但還有其他解決方案嗎？

我不能使用overflow-x: hidden。

JSFiddle

.container {
  display: flex;
  width: 100%
}
.col {
  min-height: 200px;
  padding: 30px;
  word-break: break-word
}
.col1 {
  flex: 1;
  background: orange;
  font-size: 80px
}
.col2 {
  flex: 3;
  background: yellow
}
.col3 {
  flex: 4;
  background: skyblue
}
.col4 {
  flex: 4;
  background: red
}

<div class="container">
  <div class="col col1">Lorem ipsum dolor</div>
  <div class="col col2">Lorem ipsum dolor</div>
  <div class="col col3">Lorem ipsum dolor</div>
  <div class="col col4">Lorem ipsum dolor</div>
</div>

Answer 1

我發現這在過去的幾年裡對於flex和grid都多次給我帶來了麻煩，所以我建議以下操作：

* { min-width: 0; min-height: 0; }

如果需要這種行為，只需使用min-width: auto或min-height: auto。

實際上，還可以加入box-sizing以使所有佈局更合理：

* { box-sizing: border-box; min-width: 0; min-height: 0; }

有人知道是否有任何奇怪的後果嗎？在使用上述方法的幾年中，我沒有遇到任何問題。實際上，我想不出任何情況下我會希望從內容向外佈局到flex/grid，而不是從flex/grid向內佈局到內容 --- 而且如果這種情況存在，那肯定很少見。所以這感覺像是一個糟糕的預設設定。但也許我漏掉了什麼？

Answer 2

Flex專案的自動最小尺寸

您遇到了flexbox的預設設定。

Flex專案在主軸上不能小於其內容的尺寸。

預設為...

• min-width: auto
• min-height: auto

...分別適用於行方向和列方向的flex項目。

您可以透過設定flex項目為：

• min-width: 0
• min-height: 0
• overflow: hidden（或任何其他值，除了visible）

---

Flexbox規格

關於auto值...

#

換句話說：

• min-width: auto和min-height: auto預設僅在overflow為visible時適用。
• 如果overflow的值不是visible，則min-size屬性的值為0。
• 因此，overflow: hidden可以取代min-width: 0和min-height: 0。

以及...

• 最小尺寸演算法僅適用於主軸。
• 例如，行方向容器中的flex專案預設不會獲得min-height: auto。
• 有關更詳細的解釋，請參閱此帖子：
  • min-width在flex-direction: row和flex-direction: column渲染不同

#

---

您已經套用了min-width: 0，但專案仍然不會縮小？

巢狀的Flex容器

#

如果您在HTML結構的多個層次上處理flex項目，則可能需要覆寫較高層級項目上的預設min-width: auto / min-height: auto。

基本上，具有min-width: auto的較高層級flex專案可以阻止下方嵌套的具有min-width: 0的專案縮小。

範例：

• Flex專案無法縮小到小於其內容
• 將子元素適應父元素
• white-space CSS屬性與flex版面衝突

#

---

瀏覽器渲染注意事項

• Chrome vs. Firefox / Edge

  自2017年以來，Chrome似乎要么（1）恢復到min-width: 0 / min-height: 0的預設值，要么（2）根據某個神秘的演算法在某些情況下會自動套用0的預設值。 （這可能是他們所謂的幹預。）因此，許多人在Chrome中看到他們的佈局（尤其是期望的滾動條）按預期工作，但在Firefox / Edge中不起作用。有關更詳細的信息，請參閱這裡：Firefox和Chrome之間的flex-shrink差異

• IE11

  如規格所述，min-width和min-height屬性的auto值是「新的」。這意味著某些瀏覽器可能仍然預設呈現0值，因為它們在值更新之前實作了flex佈局，並且因為0是CSS 2.1中min-width和min-height的初始值。 IE11是其中之一。 其他瀏覽器已經更新到了在flexbox規格中定義的較新的auto值。

---

修訂後的示範

.container {
  display: flex;
}

.col {
  min-height: 200px;
  padding: 30px;
  word-break: break-word
}

.col1 {
  flex: 1;
  background: orange;
  font-size: 80px;
  min-width: 0;   /* NEW */
}

.col2 {
  flex: 3;
  background: yellow
}

.col3 {
  flex: 4;
  background: skyblue
}

.col4 {
  flex: 4;
  background: red
}

<div class="container">
  <div class="col col1">Lorem ipsum dolor</div>
  <div class="col col2">Lorem ipsum dolor</div>
  <div class="col col3">Lorem ipsum dolor</div>
  <div class="col col4">Lorem ipsum dolor</div>
</div>