滚动条宽度会导致居中

Question

我正在尝试<div>使用flexbox 将两个内容集中在一起.我已经看了下面的线程: 滚动flex容器不适合居中的项目

<div>s 的内容是一个固定宽度的表,我将flex-grow设置为none.问题是在对齐时也考虑第二个div的滚动条占用的空间.

这是一个简单的例子: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

由于滚动条会增加元素的宽度,并且由于浏览器之间滚动条的宽度不同,因此没有可用于避免此行为的直接属性.

我想到的最简单的解决方案是使用flex-basis500px 的初始值并将其设置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>