After experimenting with various setups, I have yet to find a complete solution. My objective is to have 4 tables stacked on top of each other, each starting just below 1/4 of the browser height. I want the ability to resize each table vertically, making them larger or smaller. Additionally, I want 3 other tables to adjust their size as the manipulated table changes.
The code I have attempted causes the 4 tables to expand beyond the browser view and they do not shrink back. I understand that "resize: vertical" is not a feature of flexbox, but it is necessary for my requirements.
Previously, I have successfully used flexbox with rows to expand/shrink horizontally, so I assumed the same concept would apply for switching from row to column orientation.
Is it possible to achieve my desired layout using flexbox?
Here is the html code:
<ul class="4tables">
<li class="flexible CFS"><table id="table_CFS"></table></li>
<li class="flexible MFS"><table id="table_MFS"></table></li>
<li class="flexible SES"><table id="table_SES"></table></li>
<li class="flexible SAAS"><table id="table_SAAS"></table></li>
</ul>
And here is the css code:
ul.4tables {
display: flex;
flex-flow: column nowrap;
max-height: 99vh;
}
li.flexible {
flex: 1 1 auto;
flex-basis: auto;
height:21vh;
resize: vertical;
overflow: scroll;
}
Thank you for any assistance.