Flex布局下文字超出省略卻撐開容器？如何解決？

flex 布局下文本溢出省略導致容器撐開的解決方案

在使用 Flex 布局時，經常會遇到這種情況：左側元素寬度固定，右側元素自適應剩余空間。但當為右側文本添加省略號樣式（text-overflow: ellipsis）時，容器卻意外撐開，破壞頁面布局。本文將分析原因并提供解決方案。

問題：一個 Flex 容器包含圖片（固定寬度）和文本（自適應剩余空間）。添加文本省略樣式后，容器寬度超出預期，未完全占據可用空間（100vw），且省略號無效。這是因為即使設置了省略，瀏覽器仍會為長文本分配足夠空間顯示完整內容，導致容器撐開。

根本原因在于 Flex 布局的默認行為：子項根據內容撐開空間。長文本未限制最小寬度，即使使用了 text-overflow: ellipsis，Flex 容器仍會根據文本實際內容計算寬度。

解決方案：為包含文本的元素添加 min-width: 0; 樣式。此樣式強制文本元素的最小寬度為 0，即使文本過長，也不會影響容器寬度計算。Flex 容器將根據剩余空間分配寬度，實現預期自適應布局，同時文本溢出部分會被正確省略。 這就能完美解決 Flex 布局下文本溢出省略導致容器撐開的問題，達到自適應寬度和文本隱藏的預期效果。