how to scroll content of flex row that is flex-grow-1

Question

I have a layout with bootstrap in there are 3 rows wrapped in a flex col, like this:

<div class="row" style="height:100vh;">
  <div class="col d-flex flex-column">
    <div class="row">...</div>
      <div class="row flex-grow-1">
        <table>
          ...many rows...
        </table>
      </div>
    <div class="row">...</div>
  </div>
</div>

The first row inside flex col will be up, the second will use all the space between, and the thirth will be at bottom. In the second row I want to put a table with many rows, and contain the table inside to make somthing like a "window" to see the content of the table, scrolling the table.

But, the second div grows with table content, I tried to wrap the table inside a div and setting max-height to 100% but always the flex row grows due the table content.

¿How can I make the flex row scrolling its table inside but taking the max avalaible space of its parent with fixed height?

Answer 1

It should work like this with max-height and overflow-auto...

   <div class="row">
        <div class="col d-flex flex-column vh-100" style="max-height: 100vh">
            <div class="row">
                top row
            </div>
            <div class="row flex-grow-1 overflow-auto">
                <div class="col">
                    <table>
                        <tbody>
                            <tr>
                                <td>table row</td>
                            </tr>
                            ..
                        </tbody>
                    </table>
                </div>
            </div>
            <div class="row">bottom row</div>
        </div>
   </div>

https://www.codeply.com/go/v6AH817CoZ

Related: Bootstrap 4: Scrollable row, which fills remaining height