為什麼彈性項目不會縮小到超過內容大小？

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: border-box; min-width: 0; min-height: 0; }

有人知道是否會產生任何奇怪的後果嗎？在混合使用上述方法的幾年裡我還沒有遇到任何問題。事實上，我想不出任何我想要從內容向外佈局到 Flex/Grid 的情況，而不是從 Flex/Grid 向內佈局到內容的情況 --- 當然，如果它們存在，它們也是罕見的。所以這感覺像是一個糟糕的預設值。但也許我錯過了一些東西？

Answer 2

Flex 專案的自動最小尺寸

您遇到了 Flexbox 預設值。

彈性項目不能小於其內容沿主軸的尺寸。

預設值是...

• 最小寬度：自動
• #最小高度：自動

#

...分別用於行方向和列方向的彈性項目。

您可以透過將彈性項目設定為來覆寫這些預設值：

• 最小寬度：0
• #最小高度：0
• #溢位：隱藏（或任何其他值，可見除外）

---

Flexbox 規格

關於auto值...

#

換句話說：

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

還有...

• 最小尺寸演算法僅適用於主軸。
• 例如，行方向容器中的 Flex 項目預設不會獲得 min-height: auto。
• 有關更詳細的說明，請參閱此帖子：
  • 彎曲方向：行與彎曲方向：列的最小寬度呈現方式不同

---

你已經應用了 min-width: 0 但項目仍然沒有縮小？

巢狀 Flex 容器

#

如果您要處理HTML 結構的多個層級上的Flex 項目，則可能需要覆寫預設的min-width: auto / min-height: auto 位於更高級別的項目上。

基本上，具有 min-width: auto 的更高層級的 Flex 項目可以防止使用 min-width: 0 嵌套在下面的項目收縮。

範例：

• Flex 專案沒有縮小到小於其內容
• 讓子項目適合父項
• 空白 CSS 屬性會導致 Flex 出現問題

---

瀏覽器渲染說明

• Chrome 與 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 是min 的初始值CSS 2.1。 IE11 就是這樣的瀏覽器。 其他瀏覽器已更新至較新的 flexbox 規格 值a>.

#

---

修改後的示範

.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>