情境

Flexbox 的排版已經太方便，以至於網頁上到處都可以發現 Flexbox 的蹤跡。
今天我們再來舉一個例子，假設我們需要做一個使用者管理頁面，那我們可能會需要一些卡片，還有使用者的名字，範例如下：

你能看見多遠的未來呢？

假設這樣的卡片結構如下：

<div class="container">
  <div class="card__avatar">...</div>
  <div class="card__title">{title}</div>
</div>

其中，我們的卡片在外容器宣告使用 Flexbox 讓 Avatar 和 Title 能夠呈現水平排列並且上下置中：

.container {
  display: flex;
  align-items: center;
  gap: 12px;
  box-shadow: 0px 2px 15px -1px rgb(0 0 0 / 20%), 0px 1px 2px 0px rgb(0 0 0 / 14%), 0px 1px 17px 0px rgb(0 0 0 / 12%);
  border-radius: 4px;
  padding: 20px;
  width: 200px;
}

看到這樣的卡片樣式，如果有點經驗的讀者，可能會考慮到內容過長的問題，因此我們把他塞入了很多單字：

如何？看起來很不錯不是嗎？內容過長看起來也沒什麼問題，直接打完收工！
但是，真的是這樣嗎？

我們在完全不調整程式碼的前提下，稍微調整一下內容，一樣也是內容過長的案例，但是是單一個單字過長：

在這個狀況下，我們可能會想要加上 overflow-wrap: break-word; 來試圖讓他換行：

.card_title {
  overflow-wrap: break-word;
}

結果卻很傷心的發現沒有任何改變(哭)。
這是由於 Flexbox 的內元件(flex item)其 min-width 的預設值為 auto，因為長度沒有被限制，所以會造成內容太長而溢出。

所以我們只需要除了 overflow-wrap: break-word; 之外，再加上 min-width: 0; 就可以了：

.card_title {
  overflow-wrap: break-word;
  min-width: 0;
}

小結

今天我們舉了使用者管理卡片為例，來演示 Flexbox item 內容太長會溢出的問題。我們一開始嘗試著多加幾個單字，卻意外的發現好像沒有什麼問題，如果在這時候就放心的話，我們就會忽略一個單字太長而造成溢出的問題，這個小細節真的是非常危險呀！

並且解決方式居然不是加上 overflow-wrap: break-word; 就能夠搞定，因為在搞鬼的還有 min-width: auto; 預設值的問題，這真的是一山還有一山高，已經好不容易爬過一座山了，發現後面還有一座山。

雖然本篇內容很簡短，但是卻是很容易會遇到的情境，希望這樣的情境能夠幫助大家在使用 Flexbox 時能注意到這些細節，並且防患未然。