CSS Grid 被長文字撐開？minmax(0, 1fr) 與 min-width: 0 怎麼分

1
/* 內容可能影響右欄的自動最小值 */
2
.layout {
3
  display: grid;
4
  grid-template-columns: 160px 1fr;
5
  gap: 16px;
6
}
7

8
/* 右欄可以縮到零，最大值仍用 fr 分配 */
9
.layout {
10
  grid-template-columns: 160px minmax(0, 1fr);
11
}

1
.layout > .content {
2
  min-width: 0;
3
}
4

5
.content pre {
6
  max-width: 100%;
7
  overflow-x: auto;
8
}
9

10
.content .long-url {
11
  overflow-wrap: anywhere;
12
}

1
<!doctype html>
2
<html lang="zh-Hant">
3
<meta charset="utf-8">
4
<meta name="viewport" content="width=device-width, initial-scale=1">
5
<title>Grid 溢位比較</title>
6
<style>
7
  body { margin: 24px; font: 16px system-ui; }
8
  .layout {
9
    display: grid;
10
    width: 600px;
11
    max-width: 100%;
12
    grid-template-columns: 160px 1fr;
13
    gap: 16px;
14
    border: 1px solid;
15
  }
16
  pre { margin: 0; font: 16px monospace; }
17
  .track { grid-template-columns: 160px minmax(0, 1fr); }
18
  .complete > article { min-width: 0; }
19
  .complete pre { overflow-x: auto; }
20
</style>
21
<h1>Grid 溢位比較</h1>
22
<h2>原始</h2>
23
<div class="layout" id="original">
24
  <aside>側欄</aside><article><pre></pre></article>
25
</div>
26
<h2>只改欄軌</h2>
27
<div class="layout track" id="track">
28
  <aside>側欄</aside><article><pre></pre></article>
29
</div>
30
<h2>完整處理</h2>
31
<div class="layout track complete" id="complete">
32
  <aside>側欄</aside><article><pre></pre></article>
33
</div>
34
<button id="measure">量測三組寬度</button>
35
<pre id="result"></pre>
36
<script>
37
  document.querySelectorAll('.layout pre').forEach(pre => {
38
    pre.textContent = 'W'.repeat(200);
39
  });
40
  document.getElementById('measure').addEventListener('click', () => {
41
    const rows = ['original', 'track', 'complete'].map(id => {
42
      const grid = document.getElementById(id);
43
      const item = grid.querySelector('article');
44
      const pre = grid.querySelector('pre');
45
      return {
46
        id,
47
        columns: getComputedStyle(grid).gridTemplateColumns,
48
        containerClient: grid.clientWidth,
49
        containerScroll: grid.scrollWidth,
50
        itemWidth: item.getBoundingClientRect().width,
51
        preClient: pre.clientWidth,
52
        preScroll: pre.scrollWidth,
53
      };
54
    });
55
    document.getElementById('result').textContent =
56
      JSON.stringify(rows, null, 2);
57
  });
58
</script>
59
</html>

1
@media (max-width: 640px) {
2
  .layout {
3
    grid-template-columns: minmax(0, 1fr);
4
  }
5
}