滚动条宽度会导致居中

Question

我正在尝试使用flexbox将两个<div>s的内容集中在一起。我看了下面的帖子：scrolling flex container does not fit centered items

<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

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

我想到的最简单的解决方案是使用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>

Answer 2

要使内容位于中心，您只需将容器内的对齐设置为中心即可

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>