Flex overflow: auto 不捲動？從巢狀祖先檢查 min-height: 0

1
shell：直向 Flex，高度 320px
2
├─ header：48px
3
└─ workspace：Flex item，也是一個直向 Flex 容器
4
   └─ pane：Flex item，overflow: auto
5
      └─ content：900px 高的內容

1
<!doctype html>
2
<html lang="zh-Hant">
3
<meta charset="utf-8">
4
<title>巢狀 Flex 捲動對照</title>
5
<style>
6
  * { box-sizing: border-box; }
7
  body { margin: 16px; font-family: sans-serif; }
8
  .cases { display: flex; flex-wrap: wrap; gap: 24px; }
9
  .shell { width: 280px; height: 320px; display: flex;
10
    flex-direction: column; outline: 2px solid #555; }
11
  header { flex: 0 0 48px; background: #cde9df; }
12
  .workspace { flex: 1; display: flex; flex-direction: column; }
13
  .pane { flex: 1; overflow: auto; }
14
  .content { height: 900px; padding: 12px;
15
    background: linear-gradient(#f7c4b6, #b4d6f3); }
16
  .fixed .workspace { min-height: 0; }
17
  .unbounded { height: auto; }
18
</style>
19
<div class="cases">
20
  <section>
21
    <h2>祖先未縮小</h2>
22
    <div class="shell broken"><header>固定標頭</header>
23
      <div class="workspace"><div class="pane" tabindex="0"
24
        role="region" aria-label="原始內容區">
25
        <div class="content">內容開頭<br>向下捲動檢查</div>
26
      </div></div>
27
    </div>
28
  </section>
29
  <section>
30
    <h2>祖先 min-height: 0</h2>
31
    <div class="shell fixed"><header>固定標頭</header>
32
      <div class="workspace"><div class="pane" tabindex="0"
33
        role="region" aria-label="修正內容區">
34
        <div class="content">內容開頭<br>向下捲動檢查</div>
35
      </div></div>
36
    </div>
37
  </section>
38
  <section>
39
    <h2>外層沒有高度上限</h2>
40
    <div class="shell fixed unbounded"><header>固定標頭</header>
41
      <div class="workspace"><div class="pane" tabindex="0"
42
        role="region" aria-label="無上限內容區">
43
        <div class="content">內容開頭<br>向下捲動檢查</div>
44
      </div></div>
45
    </div>
46
  </section>
47
</div>
48
</html>

1
console.table([...document.querySelectorAll('.shell')].map(shell => {
2
  const workspace = shell.querySelector('.workspace');
3
  const pane = shell.querySelector('.pane');
4
  return {
5
    case: shell.className,
6
    shell: shell.clientHeight,
7
    workspace: workspace.clientHeight,
8
    pane: pane.clientHeight,
9
    content: pane.scrollHeight,
10
    minHeight: getComputedStyle(workspace).minHeight,
11
  };
12
}));