I am faced with a challenge where I have 4 elements nested inside a container element. The height of the container should be set to 100% of the browser window. The inner elements need to stack vertically, with the first two and last elements having a natural height based on their content. However, the third element should expand to fill any remaining space in the container after the other elements have taken up what they need.
Visually, the layout should resemble this:
I cannot assign fixed heights to Element-1, Element-2, or Element-4, and I also do not know the exact height of the Container. Element-3's height is unknown as well, but if it exceeds the available space, I plan to use overflow-scroll to accommodate it. While I've included spacing between the elements for clarity, there will also be margins/padding separating them.
How can I achieve this using HTML/CSS? I am open to compromises for a satisfactory layout. Additionally, if the technique can be applied horizontally as well (which I occasionally require), that would be ideal.