Check out the demo here
I am working with a table that has an indefinite number of rows and columns. When the table has a small number of rows and columns, it adjusts its width according to the available page space minus the width of the sidebar. Everything looks fine in this scenario as shown in the images below. https://i.sstatic.net/ko2D2.png https://i.sstatic.net/JGENt.png However, problems arise when I increase the number of columns. The minimum width of the individual columns causes the table to overflow off the page horizontally, pushing the buttons above the table outside the viewport. Similarly, as I increase the number of rows and scroll to the bottom, both the buttons and the header start scrolling out of view. https://i.sstatic.net/blnjD.png https://i.sstatic.net/iGDex.png Ideally, the height of the table should adjust to fill the remaining space below the "Save" button, while the width should adapt to the screen width after subtracting the sidebar width (if open). https://i.sstatic.net/H0UuW.png If the table ends up larger than the available space, it should display scrollbars within the table itself, rather than causing the entire page to scroll. As I have utilized flex-layout, I do not have direct access to CSS files. However, you can test or modify the CSS either by clicking here or through the console screen in the demo.
P.S.: Please note that I am unable to make any changes to the blue/orange sections or their parent elements. My modifications are limited to only the second child of the sibling of .header in the DOM tree.