Html Flexbox-滚动条移动居中的内容

具有两列的Flexbox。每一列都有一个中心内容，最大宽度为X。第二列的overflow-y设置为滚动。
显然，滚动条需要空间，并将第二列的居中内容向左移动。
有没有一种方法可以让内容保持在另一个内容的正下方

HTML:

---

请参阅：

一个常见的修复方法是在“section”元素CSS中添加以下行：

transform: translate(8px, 0);

它将把'section'元素8px向右移动，以说明滚动条的作用。

---

在Win 7上使用Chrome和IE进行测试：/

您无法可靠地补偿滚动条的宽度，因为不同浏览器的滚动条宽度不同。例如，Safari垂直卷轴比Chrome薄。不知道在你的情况下如何解决这个问题，除非你想向上面的元素添加一个垂直滚动，或者像现在这样接受一个轻微的错位。这可能是一个很好的方法+1。。。但请注意迈克尔·布勒对这个问题的评论

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

transform: translate(8px, 0);