滚动宽宽度将居中抛弃

Question

我正在尝试使用FlexBox将两个<div> s的内容集中。我已经看了以下线程：滚动Flex容器不适合中心项目

<div> S的内容是一个具有固定宽度的表，我将Flex Grow设置为无。问题在于，在对齐时还考虑了第二个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>