Responsive table inside Flexbox not working

Question

The responsive Bootstrap table inside my flexbox layout is not working. It seems that the overflow property from the "responsive-table" class having no effect.

If I change the outer layout from flexbox to floating divs, everything looks good.

Does someone of you have an idea?

.is-app {
  display: flex;
  width: 100vw;
  height: 100vh;
  flex-direction: column;
  background: #ccc;
}

.is-header {
  background: #000;
  height: 45px;
}

.is-main {
  display: flex;
}

.is-sidebar {
  width: 300px;
  flex-basis: 300px;
  flex-grow: 0;
  flex-shrink: 0;
  height: 400px;
  background: red;
}

.is-content {
  padding: 20px;
  flex: 1;
}

.is-content-inner {
  background: #ccc;
  width: 100%;
  height: 100%;
}

.is-footer {
  background: #000;
  height: 45px;
}

.is-table-wrap {
  overflow-y: auto;
}

<body>

  <div class="is-app">

    <header class="is-header"></header>

    <main class="is-main">
      <aside class="is-sidebar"></aside>
      <div class="is-content">
        <div class="is-content-inner">
          <div class="table-responsive">
            <table class="table table-borderless table-dark">
              <tbody>
                <tr>
                  <th scope="row">1</th>
                  <td>Mark</td>
                  <td>Otto</td>
                  <td>@mdo</td>
                  <td>Mark</td>
                  <td>Otto</td>
                  <td>@mdo</td>
                  <td>Mark</td>
                  <td>Otto</td>
                  <td>@mdo</td>
                  <td>Mark</td>
                  <td>Otto</td>
                  <td>@mdo</td>
                  <td>Mark</td>
                  <td>Otto</td>
                  <td>@mdo</td>
                </tr>
                <tr>
                  <th scope="row">1</th>
                  <td>Mark</td>
                  <td>Otto</td>
                  <td>@mdo</td>
                  <td>Mark</td>
                  <td>Otto</td>
                  <td>@mdo</td>
                  <td>Mark</td>
                  <td>Otto</td>
                  <td>@mdo</td>
                  <td>Mark</td>
                  <td>Otto</td>
                  <td>@mdo</td>
                  <td>Mark</td>
                  <td>Otto</td>
                  <td>@mdo</td>
                </tr>
                <tr>
                  <th scope="row">1</th>
                  <td>Mark</td>
                  <td>Otto</td>
                  <td>@mdo</td>
                  <td>Mark</td>
                  <td>Otto</td>
                  <td>@mdo</td>
                  <td>Mark</td>
                  <td>Otto</td>
                  <td>@mdo</td>
                  <td>Mark</td>
                  <td>Otto</td>
                  <td>@mdo</td>
                  <td>Mark</td>
                  <td>Otto</td>
                  <td>@mdo</td>
                </tr>
              </tbody>
            </table>
          </div>
        </div>
      </div>
    </main>

    <footer class="is-footer"></footer>

  </div>

</body>

https://jsfiddle.net/JulesMu/oeq1bzr8/

This issue could use an answer specific to Bootstrap. There may be a solution that doesn't require custom CSS. The solution proposed in the comment above doesn't work for me. — isherwood, Nov 30 '21 at 18:10

Responsive table inside Flexbox not working

0 Answers0