1

I have a page with a sidebar that is 250px wide and a main content container that is 100% width to fill up the remaining space, sitting next to the sidebar. These items are flex-children with a parent flex container.

HTML:

  <div className="flex-container">
      <div className="sidebar">sidebar</div>
      <div className="main-container">main container</div>
  </div>

CSS:

.flex-container {
    display: flex;
    flex: 1;
}

.sidebar {
    width: 250px;
}

.main-container { 
    width: 100%;
}

This works fine normally, but on one page I have a table which stretches the main content panel so that the page is more than 100% width which results in a horizontal scroll bar.

To get around this I have tried to calculate a fixed width for the content container with the following code:

.main-content {
    width: calc(100vw - 250px);
}

This mostly works but the calculation is off by 17px, causing a smaller, but still existent horizontal scrollbar and I can't work out why. Is this due to the scrollbar width included in the vw calculation?

Is there a way around this?

If I take the width of the main-container and subtract it from the inner viewport width it leaves me with 233px of space, which is less than the 250px it should be, and has the 17px remainder.

I am using Google Chrome for testing, but any solution should be cross browser compliant.

Antfish
  • 1,123
  • 2
  • 18
  • 39

2 Answers2

1

You should not use width:100% for a flex children but use the flex-grow/shrink and basis rules or min/max-size rules.

Unsure of your real context here is an example with max-width:calc(100% - 250px ); :

.flex-container {
  display: flex;
  margin-bottom: 1em;
  /*demo purpose */
}

.sidebar {
  width: 250px;
}

.main-container {
  max-width: calc(100% - 250px);
}


/* add padding, border and margin or a gap to see how that behaves */

.sidebar,
.main-container {
  padding: 1em;
  border: solid;
  margin: 5px;
}


/* make it overflow for sure*/

table:hover td {
  border: 1px solid;
  padding: 0 1vw;
  font-size: 5vw;
}

.flex-container+.flex-container>* {
  margin: 0;
}

.flex-container:nth-child(3) {
  gap: 1em
}
<div class="flex-container">
  <div class="sidebar">sidebar</div>
  <div class="main-container">main container
    <table>
      <tr>
        <td>td</td>
        <td>td</td>
        <td>td</td>
        <td>td</td>
        <td>td</td>
        <td>td</td>
        <td>td</td>
        <td>td</td>
        <td>td</td>
        <td>td</td>
        <td>td</td>
        <td>td</td>
        <td>td</td>
        <td>td</td>
        <td>td</td>
        <td>td</td>
        <td>td</td>
        <td>td</td>
        <td>td</td>
        <td>td</td>
        <td>td</td>
        <td>td</td>
        <td>td</td>
        <td>td</td>
        <td>td</td>
        <td>td</td>
        <td>td</td>
        <td>td</td>
        <td>td</td>
        <td>td</td>
        <td>td</td>
        <td>td</td>
        <td>td</td>
        <td>td</td>
        <td>td</td>
        <td>td</td>
        <td>td</td>
        <td>td</td>
        <td>td</td>
        <td>td</td>
        <td>td</td>
        <td>td</td>
        <td>td</td>
        <td>td</td>
        <td>td</td>
        <td>td</td>
        <td>td</td>
        <td>td</td>
        <td>td</td>
        <td>td</td>
        <td>td</td>
        <td>td</td>
        <td>td</td>
        <td>td</td>
        <td>td</td>
        <td>td</td>
        <td>td</td>
        <td>td</td>
        <td>td</td>
        <td>td</td>
        <td>td</td>
        <td>td</td>
        <td>td</td>
      </tr>
    </table>
  </div>
</div>

<div class="flex-container">
  <div class="sidebar">sidebar (no margin)</div>
  <div class="main-container">main container(no margin)
    <table>
      <tr>
        <td>td</td>
        <td>td</td>
        <td>td</td>
        <td>td</td>
        <td>td</td>
        <td>td</td>
        <td>td</td>
        <td>td</td>
        <td>td</td>
        <td>td</td>
        <td>td</td>
        <td>td</td>
        <td>td</td>
        <td>td</td>
        <td>td</td>
        <td>td</td>
        <td>td</td>
        <td>td</td>
        <td>td</td>
        <td>td</td>
        <td>td</td>
        <td>td</td>
        <td>td</td>
        <td>td</td>
        <td>td</td>
        <td>td</td>
        <td>td</td>
        <td>td</td>
        <td>td</td>
        <td>td</td>
        <td>td</td>
        <td>td</td>
        <td>td</td>
        <td>td</td>
        <td>td</td>
        <td>td</td>
        <td>td</td>
        <td>td</td>
        <td>td</td>
        <td>td</td>
        <td>td</td>
        <td>td</td>
        <td>td</td>
        <td>td</td>
        <td>td</td>
        <td>td</td>
        <td>td</td>
        <td>td</td>
        <td>td</td>
        <td>td</td>
        <td>td</td>
        <td>td</td>
        <td>td</td>
        <td>td</td>
        <td>td</td>
        <td>td</td>
        <td>td</td>
        <td>td</td>
        <td>td</td>
        <td>td</td>
        <td>td</td>
        <td>td</td>
        <td>td</td>
      </tr>
    </table>
  </div>
</div>
<div class="flex-container">
  <div class="sidebar">sidebar (no margin but a gap)</div>
  <div class="main-container">main container (no margin but a gap)
    <table>
      <tr>
        <td>td</td>
        <td>td</td>
        <td>td</td>
        <td>td</td>
        <td>td</td>
        <td>td</td>
        <td>td</td>
        <td>td</td>
        <td>td</td>
        <td>td</td>
        <td>td</td>
        <td>td</td>
        <td>td</td>
        <td>td</td>
        <td>td</td>
        <td>td</td>
        <td>td</td>
        <td>td</td>
        <td>td</td>
        <td>td</td>
        <td>td</td>
        <td>td</td>
        <td>td</td>
        <td>td</td>
        <td>td</td>
        <td>td</td>
        <td>td</td>
        <td>td</td>
        <td>td</td>
        <td>td</td>
        <td>td</td>
        <td>td</td>
        <td>td</td>
        <td>td</td>
        <td>td</td>
        <td>td</td>
        <td>td</td>
        <td>td</td>
        <td>td</td>
        <td>td</td>
        <td>td</td>
        <td>td</td>
        <td>td</td>
        <td>td</td>
        <td>td</td>
        <td>td</td>
        <td>td</td>
        <td>td</td>
        <td>td</td>
        <td>td</td>
        <td>td</td>
        <td>td</td>
        <td>td</td>
        <td>td</td>
        <td>td</td>
        <td>td</td>
        <td>td</td>
        <td>td</td>
        <td>td</td>
        <td>td</td>
        <td>td</td>
        <td>td</td>
        <td>td</td>
      </tr>
    </table>
  </div>
</div>
G-Cyrillus
  • 94,270
  • 13
  • 95
  • 118
0

Try controling flex grow/shrink of the children of the flex container:

.flex-container {
    display: flex;
    flex: 1;
    width: 100vw;
}

.sidebar {
    width: 250px;
    flex-shrink: 0;
}

.main-container { 
    width: 100%;
    min-
}
Azad Kavian
  • 1
  • 3