title: "Whatever is Left" in a CSS layout
body: <p>I have 4 elements inside a container element. The container element will have its height set to 100% of the browser window. The 4 inner elements will appear vertically stacked on each other (as normal). The first two elements and the last element should have a "natural" height (ie: enough to fit their contents). The 3rd element should expand to fill the space available in the container, after the other 3 eat all they need to.</p>
  
  <p>So, it would look something like this:</p>
  
  <p><img src="https://i.stack.imgur.com/tEssz.png" alt="CSS Stacked Elements"></p>
  
  <p>I cannot set explicit heights for Element-1, Element-2, or Element-4, nor do I know the height of the Container. I don't know the natural height of Element-3 either; I plan on using <code>overflow-scroll</code> if it gets larger then what's available. I've added spacing between the elements for illustration, but there will be spacing (margins/padding) between the real elements too.</p>
  
  <p>How do you achieve this using HTML/CSS? If compromises have to be made to get a decent layout, I'll consider them. Bonus points if the technique also applies horizontally (which I've needed on occasion).</p>