具有两列的 Flexbox。每个都有一个最大宽度为 X 的居中内容。第二列的overflow-y设置为scroll。
显然滚动条需要空间并将第二列的居中内容向左移动。
有没有办法让内容仍然完全低于另一个？
HTML：
<header>
<nav>nav</nav>
</header>
<main>
<section>section</section>
</main>
CSS：
html, body {
margin: 0;
padding: 0;
height: 100vh;
}
body {
display: flex;
flex-direction: column;
}
header {
flex: 0 0 auto;
}
main {
flex: 1 1 auto;
overflow-y: scroll;
}
nav {
width: 800px;
margin: 0 auto;
}
section {
width: 800px;
margin: 0 auto;
}