I am in the process of creating an angular component with a header, buttons, a table, more buttons, and a footer. However, I am facing some challenges with the layout.
<my-component>
<div>Header Section</div>
<some-stuff class="flex flex-col">Buttons Area</some-stuff>
<the-problem-child>
<table>Table Content<table>
<div>Additional Buttons</div>
</the-problem-child>
<div>Footer Section</div>
</my-component>
The issue arises when the table has too many rows and overflows the <my-component>. I need to make the table scrollable without setting a fixed height or max-height due to its dynamic nature within other components.
Any suggestions on how to prevent overflow without limiting the height?
I have experimented with flex-box and various properties but haven't found a solution to stop <the-problem-child> from overflowing the parent <my-component> without using fixed heights.