title: Bootstrap 4 fix vertical overflow of table
body: <p>I'm creating a website using Bootstrap 4 consisting of a navbar and footer with fixed height, and 2 columns between them. The columns will have data (tables, forms) which will sometimes overflow and should cause the columns to be scrollable. I'm stuck at trying to make the columns take as much vertical space as they can without causing the whole site to take more 100% of the vertical space.</p>
  
  <p>I currently have this:</p>
  
  <pre><code>&lt;body class="justify-content-center pt-3 pb-5"&gt;
  
      &lt;div class="bg-light w-75 h-100 d-flex flex-column"&gt;
  
          &lt;nav class="navbar navbar-expand-lg navbar-dark bg-dark"&gt;
              &lt;a class="navbar-brand" href="/suche"&gt; &lt;img
                  src="/ic_launcher-web.png" alt=""&gt;
              &lt;/a&gt;
              &lt;div class="collapse navbar-collapse" id="navbarSupportedContent"&gt;
  
              &lt;/div&gt;
          &lt;/nav&gt;
  
          &lt;div class="row pt-3 flex-grow-1"&gt;
              &lt;div class="col"&gt;
                  &lt;h4&gt;Column 1&lt;/h4&gt;
  
              &lt;/div&gt;
              &lt;div class="col d-flex flex-column"&gt;
                  &lt;h4&gt;Column 2&lt;/h4&gt;
                  &lt;div class="overflow-auto"&gt;
                      &lt;table class="table"&gt;
                          &lt;tbody&gt;
                              &lt;tr&gt;
                                  &lt;td class="w-25"&gt;&lt;h3&gt;Head1&lt;/h3&gt;&lt;/td&gt;
                                  &lt;td class="w-75"&gt;&lt;h3&gt;Head2&lt;/h3&gt;&lt;/td&gt;
                              &lt;/tr&gt;
                              &lt;tr&gt;
                                  &lt;td&gt;Test1&lt;/td&gt;
                                  &lt;td&gt;Test2&lt;/td&gt;
                              &lt;/tr&gt;
  
                              ...
  
                              &lt;tr&gt;
                                  &lt;td&gt;Test39&lt;/td&gt;
                                  &lt;td&gt;Test40&lt;/td&gt;
                              &lt;/tr&gt;
                          &lt;/tbody&gt;
                      &lt;/table&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
          &lt;/div&gt;
  
      &lt;nav class="navbar fixed-bottom navbar-light bg-dark"&gt;
          &lt;span class="navbar-text"&gt; © 2020 &lt;/span&gt;
      &lt;/nav&gt;
  
  &lt;/body&gt;
  </code></pre>
  
  <pre><code>body {
      height: 100%;
      background-color : yellow;
      background-repeat: no-repeat;
      background-attachment: fixed;
      background-size: cover;
      display: -ms-flexbox;
      display: flex;
      -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  }
  </code></pre>
  
  <p>The table in the right column grows outside its parent container instead of becoming scrollable, causing the whole web page to become larger than the view and scrollable:
  <a href="https://i.stack.imgur.com/J1xnG.png" rel="nofollow noreferrer">here is a screenshot</a>.</p>
  
  <p>It all works if I set the table's parent div to a fixed height in px, but I would like it to fill all remaining vertical space without setting fixed values. What am I doing wrong? I'm not very versed at html and bootstrap, but I feel this may be an easy fix for someone with experience.</p>
  
  <p>Edit to add a screenshot how I want it to look like: <a href="https://i.stack.imgur.com/8j0P5.png" rel="nofollow noreferrer">here</a>
  Here I have set the height of the parent div (the one with class="overflow-auto") to 420px. Notice how only the table is scrollable and does not extend below the white area (parent div), the "Column 2" text and everything around it is always in the same place. </p>