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

时间:2017-03-21 14:02:07

标签: html css flexbox scrollbar

Flexbox有两列。每个都有一个居中的内容,其中 max-width 为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;
}

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

1 个答案:

答案 0 :(得分:1)

一个hacky修复方法是将以下行添加到&#39;部分&#39;元素CSS:

transform: translate(8px, 0);

它会移动&#39;部分&#39;元素8px在右边占用滚动条。 测试在Win 7上的Chrome和IE中工作:/