如何在元素a上添加垂直滾動條，同時避免其祖先元素b出現滾動條？

巧妙控制元素滾動條：讓子元素滾動，父元素保持靜止

網頁開發中，靈活運用css控制元素滾動條至關重要。本文將解決一個常見問題：如何在子元素a上添加垂直滾動條，同時阻止其父元素b出現滾動條。

假設元素a嵌套在父元素b中，并且父元素b使用了flex布局導致高度被拉伸。為了實現目標，我們需要以下步驟：

1. 限制子元素高度并啟用自動滾動: 為元素a設置max-height屬性，并將其overflow屬性設置為auto。max-height 限制了a的最大高度，防止其內容撐大父元素b；overflow: auto 則會在內容超出max-height時自動顯示垂直滾動條。

2. 確保子元素高度不超過父元素: max-height 的值需謹慎設置，確保其不大于父元素b的高度。 如果父元素b的高度是動態的，則需要根據父元素b的高度動態調整max-height的值。

3. 隱藏父元素滾動條 (可選但推薦): 為了保險起見，可以將父元素b的overflow屬性設置為hidden，徹底阻止其顯示滾動條。

另一種有效方法是使用視口高度單位vh設置元素a的高度，例如 height: 80vh;。 這能確保元素a的高度相對于瀏覽器窗口高度進行調整，從而避免撐大父元素b。 然后同樣設置 overflow: auto;。

總結: 要實現子元素a出現滾動條而父元素b保持靜止，關鍵在于限制子元素a的高度，并利用overflow: auto 和 overflow: hidden 屬性控制滾動條的顯示與隱藏。 選擇使用max-height 或 vh 單位設置高度，取決于你的具體布局和需求。