居中被滚动条宽度抛出

Question

我正在尝试使用 flexbox 将两个 <div> 的内容居中。我查看了以下线程： scrolling flex container does not fit centered items

<div>s 的内容是固定宽度的 table，我将 flex-grow 设置为 none。问题是第二个div的滚动条取的space在对齐的时候也考虑到了

举个简单的例子： http://jsfiddle.net/boc39Lsa/2/

#container {
    background-color: green;
    display: flex;
    /*overflow: auto;*/
}
.item {
    background-color: white;
    border: 1px solid black;
    flex-grow: 0;
}


.item:first-child {
    margin-left: auto;
}
.item:last-child {
    margin-right:auto;
}

.bigContent{
  height: 1000px;
}

.scroll{
  overflow: auto;
  height: 300px;
}

<div id="container">
    <div class="item">
      <table width="500px">
        <tr><td>Header</td></tr>
      </table>
    </div>
</div>
<div id="container">
    <div class="item scroll">
      <div class="bigContent">
         <table width="500px">
            <tr><td>Some content</td></tr>
         </table>
      </div>      
    </div>
</div>

Answer 1

要让内容居中，只需要将容器内的对齐方式设置为居中即可，如

text-align: center;

#container {
    background-color: green;
    display: flex;
    text-align: center;
    /*overflow: auto;*/
}
.item {
    background-color: white;
    border: 1px solid black;
    flex-grow: 0;
}


.item:first-child {
    margin-left: auto;
}
.item:last-child {
    margin-right:auto;
}

.bigContent{
  height: 1000px;
}

.scroll{
  overflow: auto;
  height: 300px;
}

<div id="container">
    <div class="item">
      <table width="500px">
        <tr><td>Header</td></tr>
      </table>
    </div>
</div>
<div id="container">
    <div class="item scroll">
      <div class="bigContent">
         <table width="500px">
            <tr><td>Some content</td></tr>
         </table>
      </div>      
    </div>
</div>

Answer 2

由于滚动条增加了元素的宽度，并且滚动条的宽度因浏览器而异，因此无法立即属性来避免这种行为。

我想到的最简单的解决方案是使用 500px 的初始 flex-basis 并将 table 设置为 100% 宽

堆栈片段

#container {
    background-color: green;
    display: flex;
}
.item {
    background-color: white;
    border: 1px solid black;
    flex-basis: 500px;
}

.item:first-child {
    margin-left: auto;
}
.item:last-child {
    margin-right:auto;
}

.bigContent{
  height: 1000px;
}

.scroll{
  overflow-y: auto;
  overflow-x: hidden;
  height: 300px;
}

<div id="container">
    <div class="item">
      <table width="100%">
        <tr><td>Header</td></tr>
      </table>
    </div>
</div>
<div id="container">
    <div class="item scroll">
      <div class="bigContent">
         <table width="100%">
            <tr><td>Some content</td></tr>
         </table>
      </div>      
    </div>
</div>

居中被滚动条宽度抛出

Centering is thrown off by scrollbar width

html

css

centering

flexbox