You can sort-of get there with a flexbox column and some custom CSS:
<div class="d-flex flex-column vw-100 vh-100">
<div id="e_top">
Top row...
</div>
<div id="e_tabs_edits">
Main content...
</div>
<div id="e_bottom">
Bottom row...
</div>
</div>
html, body {
overflow: hidden;
}
Demo[
^]
However, you'd probably be better to use CSS Grid layout instead:
CSS Grid Layout - CSS: Cascading Style Sheets | MDN[
^]
A Complete Guide to Grid | CSS-Tricks[
^]
<div id="main_grid">
<div id="e_top">
Top row...
</div>
<div id="e_tabs_edits">
Main content...
</div>
<div id="e_bottom">
Bottom row...
</div>
</div>
#main_grid {
width: 100vw;
height: 100vh;
display: grid;
grid-template-areas: "top-row" "main-row" "bottom-row";
grid-template-rows: auto 1fr auto;
}
#e_top {
grid-area: top-row;
}
#e_bottom {
grid-area: bottom-row;
}
#e_tabs_edits {
grid-area: main-row;
overflow: auto;
}
Demo[
^]