設定

• 為了描述方面，我們將以 width 舉例
• 設定三層元素，他們層層嵌套，分別稱作：inner, container, outer。如下所示：
  outer container inner
• 三層元素都有幾種情況：
  • outer
    • 有限制 例如，設置了 width 或 max-width 為固定值
    • 無限制 例如，將 width 設置為根據內容變化的值，且長度可以無限增加
  • container
    fit-content, min-content, max-content, fill-available 四種。其中 fit-content, min-content, max-content 為 width, height 等 CSS 屬性的可選值，fill-available 是指 width, height 等為 auto 時的表現。
  • inner
    • 固定寬度 設置了固定的 width
    • 文本 該層為可換行的文本，其寬度可長可短。
    • 隨父元素變化 例如 width 為 100%
• 文中會出現 inner + container < outer 這種類似表達式的表述方式。這裡 inner 指其包括 margin 在內的總寬度；container 指其 padding + border + margin 的寬度，不含 width；outer 在有限制時，指其達到限制時 width 的寬度，在無限制時，表示無限大。

fit-content, min-content, max-content

首先，當 container 設置為這三個值時，不管其他情況如何變化，其寬度始終貼合 inner，即使 inner + container 的寬度超出了 outer 的限制也是如此（超出時，網頁的表現由 overflow 屬性決定）。三者的不同體現在對 inner 寬度的影響上，下麵對此分類討論。

• inner 為固定寬度 此時三個屬性表現完全相同，inner 為其設定寬度
• inner 隨父元素變化 此時三個屬性表現完全相同。 inner 為其最小寬度，即：若 min-width 為固定值，則 inner 寬度為該值；否則，inner 寬度為 0
• inner 為可換行文本
  • min-content inner 為文本最小寬度（儘可能換行）
  • max-content inner 為文本最大寬度（完全不換行）
  • fit-content 在不超出 outer 的情況下，inner 儘可能寬。而如果 inner 為文本最小寬度時也超出了 outer，那 inner 就是文本最小寬度。更明確的表述如下：

    if (文本最大寬度 + container < outer) {
      inner = 文本最大寬度
    } else if (文本最小寬度 + container > outer) {
      inner = 文本最小寬度
    } else {
      inner = outer - container
    }
    

fill-available

• outer 為固定寬度 container 貼合 outer 內部，inner 可能超出 container
• 否則，inner 和 container 的表現與 max-content 相同（此時 fit-content 的表現也與 max-content 相同）