弹性框 - 滚动条移动居中的内容

Question

带有两列的弹性框。每个内容都有一个最大宽度为 X 的居中内容。第二列已将溢出 y 设置为滚动。
显然，滚动条需要空间并将第二列的中心内容向左移动。
有没有办法让内容仍然正好低于另一个？

.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;
}

请参阅：https://codepen.io/anon/pen/VpXvyN

Answer 1

一个笨拙的解决方法是将以下行添加到"section"元素CSS中：

transform: translate(8px, 0);

它将向右移动"部分"元素 8px 以考虑滚动条。在 Win 7 上的 Chrome 和 IE 中测试工作：/