flex 子元素 min-width: 0 — 撐滿剩餘寬度但不被內容撐爆
問題
在 flex 容器裡,某個 flex: 1 的子元素想「填滿剩餘寬度,但內容(長文字 / table / white-space: nowrap)不要把它撐爆超過容器」。只加 overflow: auto 常常沒用。
核心答案
給那個 flex item 加上 min-width: 0(Chakra:minW={0})。
<Box flex={1} minW={0} overflow="auto">縱向 flex(flex-direction: column)則用 min-height: 0 / minH={0}。
為什麼
Flex item 的 min-width 預設是 auto,代表「最小寬度 = 內容的固有寬度」。所以裡面有寬內容時,min-width: auto 會阻止收縮,把整個 item 撐大到超過 parent 的剩餘空間。min-width: 0 解除這個限制,flex: 1 才會真正只吃剩餘寬度。
minW={0} vs overflow 是兩個層次
| 目的 | 手段 |
|---|---|
| 容器不被內容撐大(寬度正確) | min-width: 0 |
| 溢出的內容怎麼呈現 | overflow / isTruncated / wrap |
- 只加
minW={0}:寬度對了,但內容仍可能視覺溢出(除非會自動 wrap)。 - 只加
overflow:很多時候根本不觸發,因為沒有minW={0},容器早就被撐大了。
常見組合:
- 要 scrollbar:
minW={0}+overflow="auto" - 要文字截斷:
minW={0}+ 子元素isTruncated(=overflow:hidden; text-overflow:ellipsis; white-space:nowrap) - 要文字換行:通常只要
minW={0},內容會 wrap 而不撐爆
一句話
「撐滿剩餘寬度但不被內容撐爆」的根本手段是 min-width: 0;overflow 只是決定溢出後怎麼呈現。