Centering is thrown off by scrollbar width

Question

I'm trying to center the content of two <div>s using flexbox. I have taken a look to the following thread: scrolling flex container does not fit centered items

The content of the <div>s is a table with fixed width and I set the flex-grow to none. The problem is that the space taken by the scrollbar of the second div is also considered while aligning.

Here a simple example: 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>

Asons · Accepted Answer · 2017-12-27T11:11:50.457

Since the scrollbar adds to an element's width, and as the width of a scrollbar differs between browsers, there is no immediate property to use to avoid this behavior.

The simplest solution that cross my mind is to use an initial flex-basis of 500px and set the table to be 100% wide

Stack snippet

#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>

score -2 · Answer 2 · edited Dec 27 '17 at 11:06

To make the content in the center, you just need to set the alignment inside the container to center, like

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>

It is not the text that should be centered, it is the elements. And btw, I didn't down vote. — Asons, Dec 27 '17 at 11:08

Centering is thrown off by scrollbar width

2 Answers2