Table body not expanding to fill available space in flex column layout

I have a flex column layout where I need to show only one of two states (table, empty) at a time, and the active state should expand to fill all available space. The empty state works perfectly, but my table is causing the entire page to expand vertically instead of scrolling within its constrained container.

My code:

<div class="container h-100 d-flex flex-column py-3" id="appRoot"><header>Header content</header><div class="mt-3 d-flex flex-column" style="flex:1; min-height:0;"><!-- Table State --><table class="table table-hover mb-0"><thead class="table-light position-sticky top-0"><tr><th style="width: 60%">Name</th><th style="width: 15%">Abrv</th><th style="width: 25%; text-align: right">Actions</th></tr></thead><tbody id="rowContainer"><!-- Table rows get populated here --></tbody></table><!-- Empty State --><div id="emptyState" class="d-flex align-items-center justify-content-center d-none" style="flex:1; min-height:0;"><div class="text-center text-muted"><i class="bi bi-inbox display-4 d-block mb-3"></i><h5>No items found</h5></div></div></div><footer>Footer content</footer></div>

The Problem:

• The empty state (with flex:1; min-height:0) correctly expands to fill available space within the viewport

• When the table has many rows, instead of scrolling internally, it expands the entire #appRoot container beyond the viewport height

• This causes the whole page to grow vertically with a scrollbar on the body, rather than having an internal scrollbar just for the table content

  P.S. I dont know is it important but i add table rows in runtime