title: Child div not filling parent
body: <p>I know this title is probably about the most common on SO, but I seem to have a very specific problem that I can't find documented.</p>
  
  <p>I have a <code>div</code> that I want to be exactly square, so I followed the CSS advice in <a href="https://stackoverflow.com/a/18021146/889604">this answer</a>.  I also want a child <code>div</code> to fill this space, so I've followed all the standard guidelines of having a <code>clear:both</code> <code>div</code> in a wrapper, etc, but my child div is <em>still</em> not filling its parent.  The problem is the <code>height: 0</code> of the parent div - is there a solution to this but still maintaining the exact square (preferably pure CSS, I'm aware there are JS solutions).  Example of this is at <a href="http://jsfiddle.net/0hy80ksj/" rel="nofollow noreferrer">this fiddle</a>.  </p>