Flexbox 文字省略號不出現？min-width: 0 要加在哪一層

可縮小的 item 與裁切文字的位置#

在水平、由左到右的 flex 列裡，flex item 的自動最小寬度可能受內容限制。flex-shrink 允許分配不足的空間，但尺寸計算仍受最小寬度約束。如果標題所在的 item 本身就跟文字一樣寬，文字沒有在自己的盒子溢出，省略號就沒有出現的條件。 CSS Flexbox 自動最小尺寸 · MDN text-overflow

把下列範例存成 HTML。第一列保留 item 的自動最小寬度，第二列只在 .file 加 min-width: 0，按鈕與截斷設定完全相同。

1
<!doctype html>
2
<meta charset="utf-8">
3
<title>Flex 省略號對照</title>
4
<style>
5
  .row {
6
    display: flex;
7
    width: 260px;
8
    gap: 8px;
9
    margin-block: 12px;
10
    border: 1px solid #999;
11
  }
12
  .file { flex: 1; }
13
  .row button { flex: none; }
14
  .filename {
15
    overflow: hidden;
16
    white-space: nowrap;
17
    text-overflow: ellipsis;
18
  }
19
  .fixed .file { min-width: 0; }
20
</style>
21

22
<div class="row">
23
  <div class="file"><div class="filename">project-monthly-report-final-approved-2026-11.pdf</div></div>
24
  <button type="button">下載</button>
25
</div>
26
<div class="row fixed">
27
  <div class="file"><div class="filename">project-monthly-report-final-approved-2026-11.pdf</div></div>
28
  <button type="button">下載</button>
29
</div>

用 DevTools 檢查時，先看 .row 的 scrollWidth 是否大於 clientWidth，再量 .filename 的這兩個值。第一列可看到外層溢出，但文字元素本身沒有被壓窄。第二列應反過來，外層收進 260px，文字元素內仍有被裁切的內容。在 Chrome 157.0.8103.38 的本機測試中，兩列的按鈕寬度相同，修正後的文字盒則比內容窄。

巢狀 Flexbox 從外往內量#

如果卡片外還有側欄和主區塊，先看最先超過父層可用寬度的 item。把 DevTools 選到該 item，在樣式面板暫加 min-width: 0，再量下一層。若某一層另有固定 width 或 min-width，需依實際設計調整該值。使用邏輯屬性時，水平書寫可用 min-inline-size: 0 表達同一個方向的限制。

把 overflow: hidden 直接放在外層也可能影響它的最小尺寸，但會裁掉其溢出的內容，連選單或焦點外框也可能受影響。只需要截斷檔名時，讓容器可縮，並把裁切留在文字本身。產品畫面若需要完整名稱，可以在同一個列的詳細資訊中提供可讀、可複製的原文。

如果 DevTools 顯示父容器其實是 Grid，欄軌也可能是限制來源，可用 Grid 的 minmax(0, 1fr) 與 min-width: 0 的方法再量一層。

參考資料：

CSSWG：Flex item 的自動最小尺寸

MDN：text-overflow

MDN：min-width