I am trying to make a container fill the parent's remaining height dynamically, while also overflowing correctly. The container should resize accordingly if the window was resized, the height values of other impacting elements were changed, etc.
The problem occurs when there exists a content overflow in the container with the orange border (refer to below images).
What I have now:
When the content overflows, notice that:
- the
<aside>NavBar gets extended vertically (where the green border crosses the red), - the
<main>area also extends beyond the app container (where the orange border crosses the red), - the sticky component also does not stick to the top in its containing parent container (with the orange border), as it is the app container (with red border) that is overflowing
What I want to achieve:
- All elements to be contained within the app container (i.e. red borders)
StackBlitz:
https://stackblitz.com/edit/stackblitz-starters-qfjjah?file=src%2FApp.tsx
Right now, the <main> is being hardcoded with a value for max-height so that it can fit within the red borders.
Please open the output window in a new tab (otherwise the hardcoded values will not work).
Things I have tried/considered:
- setting
max-height: initial, which doesn't seem to work - I don't really want to use
calc()because it would mean having subtract away a hardcoded height value, and hence not making it dynamic
