LESSON-07 · TOPIC 03
能將 Flex item 的自動最小尺寸重設為 0，使它能縮小，再用斷字處理內部長字串。
能將 Flex item 的自動最小尺寸重設為 0，使它能縮小，再用斷字處理內部長字串。
Flex item 預設 min-width:auto 可能受 min-content 撐住；只調 shrink 或隱藏 overflow，頁面仍可能橫向溢位或裁掉內容。
要修改的檔案：files/starter/style.css
定位：先選取問題 Flex item，讀 Computed min-width 與 scrollWidth/clientWidth。｜依 starter-3 定位，只修改「min-width: 0 解決長內容」的責任。
先結果，再原理；完成後要能說出自己看見的證據。
三欄服務列縮到手機寬度時，只有含長 URL 的卡片把整頁撐寬。
起始狀態：container 可縮；問題 item flex:1 1 15rem，但 min-width 仍是 auto。
runtime 的 computed min-width 由 auto 變 0px；人工重測 item 與文件 scrollWidth/clientWidth 不再橫向溢位。
驗收證據：runtime before=auto、after=0px、property=min-width；人工證據為 item 與頁面 scrollWidth<=clientWidth
Flex 卡片含長 URL、不可斷代碼或很長標題，且 shrink 已開啟仍撐破容器時。
常見混淆：min-width:0 不會自動替長字串加斷點；通常仍要在文字元素使用 overflow-wrap:anywhere。
這段程式是理解起點，不是要你直接跳過 Starter。
Flex item 雖然說可以縮，預設最小寬度仍可能被長文字卡住；min-width:0 才真正允許它縮進容器。
正式說法：For flex items, automatic minimum size can resolve from content-based min-content contribution；min-width:0 removes that automatic lower bound, while overflow wrapping handles unbroken inline content。
.service-card{flex:1 1 15rem;min-width:0}.service-card a{overflow-wrap:anywhere}每一步都留下可觀察結果；如果沒看到，先看「卡住先查」。
檔案：files/starter/style.css 定位：先選取問題 Flex item，讀 Computed min-width 與 scrollWidth/clientWidth。
要做：先重新載入 Starter，記錄目前畫面、DOM、Computed、Console 或文件內容。
預期：能指出「先選取問題 Flex item，讀 Computed min-width 與 scrollWidth/clientWidth。」目前的缺口。
證據：保存 files/starter/style.css 的目前狀態，並指出下一步只會修改哪個檔案責任。
卡住先查：確認開啟的是 files/starter/style.css，且定位到 先選取問題 Flex item，讀 Computed min-width 與 scrollWidth/clientWidth。。
檔案：files/starter/style.css 定位：先選取問題 Flex item，讀 Computed min-width 與 scrollWidth/clientWidth。
要做：執行實驗替含長 URL 的 Flex item 切換 allow-flex-shrink class，讀取 computed min-width。
預期：runtime 的 computed min-width 由 auto 變 0px；人工重測 item 與文件 scrollWidth/clientWidth 不再橫向溢位。
證據：runtime before=auto、after=0px、property=min-width；人工證據為 item 與頁面 scrollWidth<=clientWidth
卡住先查：先選取問題 Flex item，讀 Computed min-width 與 scrollWidth/clientWidth。
檔案：files/starter/style.css 定位：先選取問題 Flex item，讀 Computed min-width 與 scrollWidth/clientWidth。
要做：重新整理頁面，再逐項比對預期結果與 evidence。
預期：runtime 的 computed min-width 由 auto 變 0px；人工重測 item 與文件 scrollWidth/clientWidth 不再橫向溢位。
證據：runtime before=auto、after=0px、property=min-width；人工證據為 item 與頁面 scrollWidth<=clientWidth
卡住先查：先選取問題 Flex item，讀 Computed min-width 與 scrollWidth/clientWidth。
這個示範只讓你看懂概念，不會替你修改 Starter，也不會自動宣告完成。
勾選只是學習紀錄；真正完成仍要回到 Starter 的實際結果。
先確認超寬元素是 Flex item，不要直接改 body overflow。
在 item 加 min-width:0；長文字本身再加 overflow-wrap:anywhere。
完整解答與原因：auto minimum size 受長內容 min-content 撐住；設為 0 解除下限，斷字規則再讓內容留在縮小後盒子內。