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

TL;DR

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

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

原因

即使 Flexbox 子元素的 flex-shrink 預設值明明是 1，但在某些場合它卻不如預期縮小。（範例見此）

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