Flex 网格子元素的溢出

Question

我对网格布局有疑问。是一个网格容器（工作正常），一侧有一列跨越父级的 15%，主列占据剩余空间。您可以看到所有元素都在其框架、最大宽度和最大高度内。然而，导航栏有一个滚动条，它溢出了，您可以看到滚动条处于活动状态，与主要部分不同。 溢出仅发生在特定窗口大小之上。我的屏幕是 1366x768，但我不需要全屏即可获得它。 样本这里 谢谢你的帮助

body{
    place-content:center;
    max-height: 29.7cm;
    max-width: 30cm;
    height:100vh;
    margin: auto;
    display: grid;
    grid-template-columns: 15% 1fr%;
        }

body>nav{
    display:flex;
    flex-direction:column;
    position:relative;
    font-size: clamp(13px,2vw,17px);
    line-height: 1.1;
    > .button.last {margin-top:auto}}

溢出不应该存在... 我尝试了 min-height:0、max-height:inherit 或 100vh、box-sizing:border-box，我尽一切努力让它消失，但没有。这就像导航栏的内容比元素大了几毫米，无论后者的实际大小如何，甚至远离视口的限制。

Answer 1

问题似乎在于你放了

body > * {
 overflow-y: scroll;
 overflow-wrap: break-word;
}

因为你用它来裁剪项目，所以它会在元素上放置滚动条，因为，你说它应该像代码所说的那样。当我删除这两个属性时，滚动条消失了，但由于其他元素没有合适的宽度，它被从左向右拉伸，仅显示中间段落

我建议使用 flex 或 grid 制作一个 div，并尝试以这种方式定位元素。

我自己还没有修复它，否则我会给你完整的代码，但我希望我已经给你发送了正确的方向。

问候， 鲍比