本頁只練什麼
能用 min-width 與 max-width 為流動寬度設定上下界，而不是把容器固定成單一尺寸。
只有 width 容易在窄版溢位或在寬螢幕形成過長行長；上下界能保留彈性並限制極端狀態。
要修改的檔案：files/starter/style.css
定位：先在 Computed 確認 max-width 為 none，不先改父層寬度。｜依 starter-2 定位，只修改「min/max-width」的責任。
LESSON-05 · TOPIC 02
min/max-width
能用 min-width 與 max-width 為流動寬度設定上下界，而不是把容器固定成單一尺寸。
任務情境
先結果，再原理；完成後要能說出自己看見的證據。
現在的問題
服務卡在桌機橫跨整頁造成行長過長，但手機又需要使用全部可用寬度。
起始狀態：卡片 width:100%，未設定 max-width。
完成後要看到
runtime 的 max-width 由 none 變 384px；卡片 width:100% 且在窄版不超過父容器。
驗收證據：runtime before=none、after=384px、property=max-width；390px 時卡片外框仍位於容器內
何時會用到
內容容器、卡片、表單或圖片需要隨可用空間縮放，但不能過窄或過寬時。
常見混淆：max-width 不是固定 width；可用空間小於上限時，元素仍可縮小。
觀念與最小範例
這段程式是理解起點，不是要你直接跳過 Starter。
min/max-width Minimum and maximum width constraints
width 是想要的大小，min-width 是不能再小，max-width 是不能再大。
正式說法：min-width 與 max-width 對 used width 建立 lower/upper constraint；當限制衝突時，min-width 的約束優先於 max-width。
.card { width:100%; min-width:0; max-width:24rem; }三步完成本主題
每一步都留下可觀察結果；如果沒看到，先看「卡住先查」。
Step 1｜先看見目前缺口，不急著貼答案。
檔案：
files/starter/style.css定位：先在 Computed 確認 max-width 為 none，不先改父層寬度。要做：先重新載入 Starter，記錄目前畫面、DOM、Computed、Console 或文件內容。
預期：能指出「先在 Computed 確認 max-width 為 none，不先改父層寬度。」目前的缺口。
證據：保存 files/starter/style.css 的目前狀態，並指出下一步只會修改哪個檔案責任。
卡住先查：確認開啟的是 files/starter/style.css，且定位到 先在 Computed 確認 max-width 為 none，不先改父層寬度。。
Step 2｜只修改本主題的一個責任。
檔案：
files/starter/style.css定位：先在 Computed 確認 max-width 為 none，不先改父層寬度。要做：執行實驗替卡片切換 bounded-width class，讀取 max-width 的 before/after。
預期：runtime 的 max-width 由 none 變 384px；卡片 width:100% 且在窄版不超過父容器。
證據：runtime before=none、after=384px、property=max-width；390px 時卡片外框仍位於容器內
卡住先查：先在 Computed 確認 max-width 為 none，不先改父層寬度。
Step 3｜重新載入並以證據驗收，不以『看起來差不多』判定完成。
檔案：
files/starter/style.css定位：先在 Computed 確認 max-width 為 none，不先改父層寬度。要做：重新整理頁面，再逐項比對預期結果與 evidence。
預期：runtime 的 max-width 由 none 變 384px；卡片 width:100% 且在窄版不超過父容器。
證據：runtime before=none、after=384px、property=max-width；390px 時卡片外框仍位於容器內
卡住先查：先在 Computed 確認 max-width 為 none，不先改父層寬度。
觀察示範
這個示範只讓你看懂概念，不會替你修改 Starter，也不會自動宣告完成。
min/max-widthruntime fixture · read-only demo
本主題示範畫面：流動服務卡
驗收證據
勾選只是學習紀錄；真正完成仍要回到 Starter 的實際結果。
提示 1｜方向
保留 width:100% 的流動性，只加一個上限。
提示 2｜關鍵片段
使用 max-width:24rem；不要把 width 直接改成 24rem。
提示 3｜完整解答與原因
完整解答與原因：width:100% 讓卡片在小容器縮小，max-width:24rem 阻止桌機無限拉長，因此 runtime 讀到 none→384px。