title: Make a scollable div fill remaining space
body: <p>I want to display all products on the left side of the website.</p>
  <p><img src="https://i.stack.imgur.com/J3PQU.png" alt="Sketch" />.</p>
  <p>But I can't manage to make the middle part (1) scrollable and (2) fill the whole space between the search bar and the button at the bottom.
  Setting a height makes the whole thing scrollable, but if I try to fit it to fill the space the scrolling disappears and you can't access the bottom products.
  Thank you for helping</p>
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>body {
    overflow: hidden;
  }
  
  h5 {
    font-size: 1.2rem;
  }
  
  .main-container {
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
  }
  
  .left-row {
    width: 20%;
    border: 1px solid rgba(0, 0, 0, .125);
    justify-content: flex-start;
  }
  
  .border-top {
    height: fit-content;
    overflow: scroll;
  }
  
  .products {
    border: none;
  }
  
  .add {
    border-top: 1px solid rgba(0, 0, 0, .125);
    border-right: 1px solid rgba(0, 0, 0, .125);
    width: 20%;
    padding: 1rem;
    background-color: rgb(242, 242, 242);
  }
  
  .card {
    margin-bottom: 1rem;
  }
  
  .card-body .card-body {
    height: 100px;
  }
  
  .hover:hover {
    cursor: pointer;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;body&gt;
    &lt;div class="main-container d-flex flex-row"&gt;
      &lt;div class="left-row d-flex flex-column"&gt;
        &lt;div class="input-group justify-content-center p-3"&gt;
          &lt;input type="search" class="form-control" placeholder="Search" /&gt;
        &lt;/div&gt;
  
        &lt;div class="border-top"&gt;
          &lt;div class="products card-body"&gt;
            @foreach (Product product in Model.products) {
            &lt;div class="card hover" style="display: flex"&gt;
              &lt;p&gt;product&lt;/p&gt;
            &lt;/div&gt;
            }
          &lt;/div&gt;
        &lt;/div&gt;
        &lt;div class="add fixed-bottom d-flex justify-content-center"&gt;
          &lt;a type="button" class="btn btn-primary w-100"&gt;Add&lt;/a&gt;
        &lt;/div&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  &lt;/body&gt;</code></pre>
  </div>
  </div>
  </p>