In my Angular application, I am using bootstrap to create the following structure (simplified version).
<div class="container">
<div class="header>
<div class="mat-card>
<!-- Header content -->
</div>
</div>
<div class="row">
<div class="col-8">
<div class="mat-card>
<!-- Table content here -->
</div>
</div>
<div class="col-4>
<div class="mat-card>
<!-- Other content -->
</div>
</div>
</div>
</div>
The col-8 column in this structure will contain a mat-card with a table that may have a variable number of rows. If the table has many rows, it could exceed the page size and require scrolling to view all data.
I want to limit the col-8 column to use only the necessary space for the table, while still allowing it to expand based on the table's height. Additionally, I aim to set a maximum height for the col-8 column so it doesn't surpass the remaining vertical space on the page, making sure it stays within the browser window's height minus the header's height.
To recap:
col-8contains a dynamic-height tablecol-8should adjust its height according to the tablecol-8should not exceed the browser window's height
While setting the column's height to vh and adding overflow-y: scroll achieves part of the desired effect, it results in a fixed-height column and lacks responsiveness. It's a step in the right direction but not the complete solution.