Scrolling a table if overflow using Bootstrap table-responsive

I have a layout that, simplified:

Has a flex layout containing a nav on the left side that uses 15% of the view width.
Has a main taking up the remaining horizontal space.

For one view, I have a table that takes up more than the available space inside of main. I would like to scroll the table horizontally, not the entire page. I have tried doing this by wrapping the table with table-responsive using Bootstrap, however this still places a scrollbar for the entire page and not just the table/main elements like I want. table-responsive sounds like it does exactly what I want, but in my case it isn't working how I expect and I suspect I'm missing something.

div.main {
  display: flex;
  min-height: 100%;
}

div.main>nav {
  background-color: coral;
  flex: 0 0 15vw;
}

div.main>main {
  flex: auto;
}

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
<div class="main">
  <nav>
  </nav>
  <main>
    <div class="table-responsive">
      <table class="table table-striped table-sm">
        <thead>
          <tr>
            <th></th>
            <th>Header Name</th>
            <th>Header Name</th>
            <th>Header Name</th>
            <th>Header Name</th>
            <th>Header Name</th>
            <th>Header Name</th>
            <th>Header Name</th>
            <th>Header Name</th>
            <th>Header Name</th>
            <th>Header Name</th>
            <th>Header Name</th>
            <th>Header Name</th>
            <th>Header Name</th>
            <th>Header Name</th>
            <th>Header Name</th>
            <th>Header Name</th>
            <th>Header Name</th>
            <th>Header Name</th>
            <th>Header Name</th>
            <th>Header Name</th>
            <th>Header Name</th>
            <th>Header Name</th>
            <th>Header Name</th>
            <th>Header Name</th>
            <th>Header Name</th>
            <th>Header Name</th>
            <th>Header Name</th>
            <th>Header Name</th>
            <th>Header Name</th>
            <th>Header Name</th>
          </tr>
        </thead>
        <tbody>
          <tr>
            <th>Column Name</th>
            <td>value</td>
            <td>value</td>
            <td>value</td>
            <td>value</td>
            <td>value</td>
            <td>value</td>
            <td>value</td>
            <td>value</td>
            <td>value</td>
            <td>value</td>
            <td>value</td>
            <td>value</td>
            <td>value</td>
            <td>value</td>
            <td>value</td>
            <td>value</td>
            <td>value</td>
            <td>value</td>
            <td>value</td>
            <td>value</td>
            <td>value</td>
            <td>value</td>
            <td>value</td>
            <td>value</td>
            <td>value</td>
            <td>value</td>
            <td>value</td>
            <td>value</td>
            <td>value</td>
            <td>value</td>
          </tr>
          <tr>
            <th>Column Name</th>
            <td>value</td>
            <td>value</td>
            <td>value</td>
            <td>value</td>
            <td>value</td>
            <td>value</td>
            <td>value</td>
            <td>value</td>
            <td>value</td>
            <td>value</td>
            <td>value</td>
            <td>value</td>
            <td>value</td>
            <td>value</td>
            <td>value</td>
            <td>value</td>
            <td>value</td>
            <td>value</td>
            <td>value</td>
            <td>value</td>
            <td>value</td>
            <td>value</td>
            <td>value</td>
            <td>value</td>
            <td>value</td>
            <td>value</td>
            <td>value</td>
            <td>value</td>
            <td>value</td>
            <td>value</td>
          </tr>
          <tr>
            <th>Column Name</th>
            <td>value</td>
            <td>value</td>
            <td>value</td>
            <td>value</td>
            <td>value</td>
            <td>value</td>
            <td>value</td>
            <td>value</td>
            <td>value</td>
            <td>value</td>
            <td>value</td>
            <td>value</td>
            <td>value</td>
            <td>value</td>
            <td>value</td>
            <td>value</td>
            <td>value</td>
            <td>value</td>
            <td>value</td>
            <td>value</td>
            <td>value</td>
            <td>value</td>
            <td>value</td>
            <td>value</td>
            <td>value</td>
            <td>value</td>
            <td>value</td>
            <td>value</td>
            <td>value</td>
            <td>value</td>
          </tr>
        </tbody>
      </table>
    </div>
  </main>
</div>

Solution

It seems like the reason of that behavior is because table-responsive does not "respect"(to the way you want) to display: flex children (<main> in your case) because d-flex children does not have width, so the width of <main> is expanded to its available full width.

So there are two ways to fix it, either to simply delete the <main> wrapper, or set a width to <main> (see code snippet). Since your <nav> is set to 15vw, give a min-width:85%, max-width:85% or even width:85% to your class <main> should give you the desired behavior.

I personally recommend the first approach because I am not sure it's the default Bootstrap behavior or bug.

div.main {
  display: flex;
  min-height: 100%;
}

div.main>nav {
  background-color: coral;
  flex: 0 0 15vw;
}

div.main>main {
  min-width: 85%;
  flex: auto;
}

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
<div class="main">
  <nav>
  </nav>
  <main>
    <div class="table-responsive">
      <table class="table table-striped table-sm">
        <thead>
          <tr>
            <th></th>
            <th>Header Name</th>
            <th>Header Name</th>
            <th>Header Name</th>
            <th>Header Name</th>
            <th>Header Name</th>
            <th>Header Name</th>
            <th>Header Name</th>
            <th>Header Name</th>
            <th>Header Name</th>
            <th>Header Name</th>
            <th>Header Name</th>
            <th>Header Name</th>
            <th>Header Name</th>
            <th>Header Name</th>
            <th>Header Name</th>
            <th>Header Name</th>
            <th>Header Name</th>
            <th>Header Name</th>
            <th>Header Name</th>
            <th>Header Name</th>
            <th>Header Name</th>
            <th>Header Name</th>
            <th>Header Name</th>
            <th>Header Name</th>
            <th>Header Name</th>
            <th>Header Name</th>
            <th>Header Name</th>
            <th>Header Name</th>
            <th>Header Name</th>
            <th>Header Name</th>
          </tr>
        </thead>
        <tbody>
          <tr>
            <th>Column Name</th>
            <td>value</td>
            <td>value</td>
            <td>value</td>
            <td>value</td>
            <td>value</td>
            <td>value</td>
            <td>value</td>
            <td>value</td>
            <td>value</td>
            <td>value</td>
            <td>value</td>
            <td>value</td>
            <td>value</td>
            <td>value</td>
            <td>value</td>
            <td>value</td>
            <td>value</td>
            <td>value</td>
            <td>value</td>
            <td>value</td>
            <td>value</td>
            <td>value</td>
            <td>value</td>
            <td>value</td>
            <td>value</td>
            <td>value</td>
            <td>value</td>
            <td>value</td>
            <td>value</td>
            <td>value</td>
          </tr>
          <tr>
            <th>Column Name</th>
            <td>value</td>
            <td>value</td>
            <td>value</td>
            <td>value</td>
            <td>value</td>
            <td>value</td>
            <td>value</td>
            <td>value</td>
            <td>value</td>
            <td>value</td>
            <td>value</td>
            <td>value</td>
            <td>value</td>
            <td>value</td>
            <td>value</td>
            <td>value</td>
            <td>value</td>
            <td>value</td>
            <td>value</td>
            <td>value</td>
            <td>value</td>
            <td>value</td>
            <td>value</td>
            <td>value</td>
            <td>value</td>
            <td>value</td>
            <td>value</td>
            <td>value</td>
            <td>value</td>
            <td>value</td>
          </tr>
          <tr>
            <th>Column Name</th>
            <td>value</td>
            <td>value</td>
            <td>value</td>
            <td>value</td>
            <td>value</td>
            <td>value</td>
            <td>value</td>
            <td>value</td>
            <td>value</td>
            <td>value</td>
            <td>value</td>
            <td>value</td>
            <td>value</td>
            <td>value</td>
            <td>value</td>
            <td>value</td>
            <td>value</td>
            <td>value</td>
            <td>value</td>
            <td>value</td>
            <td>value</td>
            <td>value</td>
            <td>value</td>
            <td>value</td>
            <td>value</td>
            <td>value</td>
            <td>value</td>
            <td>value</td>
            <td>value</td>
            <td>value</td>
          </tr>
        </tbody>
      </table>
    </div>
  </main>
</div>