# Flexbox 不縮的「最小寬度」陷阱

## TL;DR

考慮為 Flexbox 的**子元素**加上 `min-width: 0` 來解決未如預期收縮的問題。

<div class="flex">
  <div class="min-w-0">...</div>
</div>

## 原因

即使 Flexbox 子元素的 `flex-shrink` 預設值明明是 `1`，但在某些場合它卻不如預期縮小。（[範例見此](https://www.joshwcomeau.com/css/interactive-guide-to-flexbox/#the-minimum-size-gotcha-11)）

1. `<input/>` 根據不同瀏覽器，它其實擁有隱含的 `min-width`，數值為 `170px ~ 200px`
2. 在任意容器裡，假如有一個特別長的英文單詞，那麼這個單詞的長度就會變成容器的`min-width`（瀏覽器預設不會隨意截斷單詞，除非設置了 `word-break: break-all`）

## 參考資料

- https://www.youtube.com/watch?v=cH8VbLM1958
- https://www.joshwcomeau.com/css/interactive-guide-to-flexbox/#the-minimum-size-gotcha-11