具有自動高度的元素溢出`overflow-y：scroll`

Question

所以這個問題困擾了我一段時間，盡管有許多其他潛在的線索和類似問題的答案，但我仍然無法弄清楚。

我有一個混合了 CSS Grid 和 Flexbox 的布局，左側邊欄包含許多應該可以滾動的按鈕。 到目前為止，這工作正常，但我無法弄清楚為什么一旦我設置了overflow-y: scroll到它。

看着它，布局總是與“外部標題”的高度一樣突出。 除此之外，它已經很靈活，可以很好地適應不同的屏幕高度和寬度。

有人可以向我解釋這種行為以及解決方法嗎？

演示：

 * { box-sizing: border-box; } body { display: grid; place-items: center; height: 100vh; margin: unset; } article { height: 600px; display: flex; flex-direction: column; padding: 24px; background-color: rgba(0, 0, 0, .1); } main { background-color: lightblue; flex: 1; max-width: 1300px; width: 100%; height: 100%; max-height: 1000px; display: grid; grid-template-columns: 200px auto 200px; grid-template-rows: 60px auto; padding: 24px; gap: 24px; } h1 { grid-column: 1 / 4; margin: unset; background-color: rgba(0, 0, 0, .1); } #categories { display: flex; flex-direction:column; background-color: rgba(0, 0, 0, 0.1); overflow: hidden; } #categories > button { width: 100%; } #categories.img { width: 100px; height: 100px; } #icons { overflow-y: scroll; } #pad { background-color: rgba(0, 0, 0, 0.1); display: flex; flex-direction: column; position: relative; } #pad canvas { background-color: white; width: 100%; flex: 1; } #pad button { position: absolute; bottom: 24px; right: 24px; } #sidebar { background-color: rgba(0, 0, 0, 0.1); display: flex; flex-direction: column; } #sidebar p { margin-bottom: auto; }

 <article> <p>Outer Title</p> <main> <h1>Inner Title</h1> <section id="categories"> <h2>Sidebar</h2> <button type="button">Up</button> <div id="icons"> <button type="button" class="img">#1</button> <button type="button" class="img">#2</button> <button type="button" class="img">#3</button> <button type="button" class="img">#4</button> <button type="button" class="img">#5</button> <button type="button" class="img">#6</button> <button type="button" class="img">#7</button> <button type="button" class="img">#8</button> <button type="button" class="img">#9</button> <button type="button" class="img">#10</button> </div> <button type="button">Down</button> </section> <section id="pad"> <h3>Title</h3> <p>Lorem ipsum dolor sit amet consectetur adipisicing elit.</p> <canvas></canvas> <button type="button">Weiter</button> </section> <aside id="sidebar"> <p>0:00</p> <button type="button">Help</button> <button type="button">Finish</button> </aside> </main> </article>

Answer 1

似乎p的默認邊距正在折疊其父元素之外的main元素。 你會注意到如果你將p設置為margin: 0; 它解決了這個問題。

但是，正確的解決方法是將max-height放在 .main 和.main .categories ，因為這是可滾動的。 然后將article設置為height: max-content; .

 * { box-sizing: border-box; } body { display: grid; place-items: center; height: 100vh; margin: unset; } article { height: max-content; display: flex; flex-direction: column; padding: 24px; background-color: rgba(0, 0, 0, .1); } main { background-color: lightblue; flex: 1; max-width: 1300px; width: 100%; height: 100%; max-height: 600px; display: grid; grid-template-columns: 200px auto 200px; grid-template-rows: 60px auto; padding: 24px; gap: 24px; } h1 { grid-column: 1 / 4; margin: unset; background-color: rgba(0, 0, 0, .1); } #categories { display: flex; flex-direction: column; background-color: rgba(0, 0, 0, 0.1); max-height: 400px; } #categories>button { width: 100%; } #categories.img { width: 100px; height: 100px; } #icons { overflow-y: scroll; } #pad { background-color: rgba(0, 0, 0, 0.1); display: flex; flex-direction: column; position: relative; } #pad canvas { background-color: white; width: 100%; flex: 1; } #pad button { position: absolute; bottom: 24px; right: 24px; } #sidebar { background-color: rgba(0, 0, 0, 0.1); display: flex; flex-direction: column; } #sidebar p { margin: auto; } article > p { margin-top: 0; }

 <article> <p>Outer Title</p> <main> <h1>Inner Title</h1> <section id="categories"> <h2>Sidebar</h2> <button type="button">Up</button> <div id="icons"> <button type="button" class="img">#1</button> <button type="button" class="img">#2</button> <button type="button" class="img">#3</button> <button type="button" class="img">#4</button> <button type="button" class="img">#5</button> <button type="button" class="img">#6</button> <button type="button" class="img">#7</button> <button type="button" class="img">#8</button> <button type="button" class="img">#9</button> <button type="button" class="img">#10</button> </div> <button type="button">Down</button> </section> <section id="pad"> <h3>Title</h3> <p>Lorem ipsum dolor sit amet consectetur adipisicing elit.</p> <canvas></canvas> <button type="button">Weiter</button> </section> <aside id="sidebar"> <p>0:00</p> <button type="button">Help</button> <button type="button">Finish</button> </aside> </main> </article>