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.

I have a `div` that I want to be exactly square, so I followed the CSS advice in [this answer](https://stackoverflow.com/a/18021146/889604). I also want a child `div` to fill this space, so I've followed all the standard guidelines of having a `clear:both` `div` in a wrapper, etc, but my child div is *still* not filling its parent. The problem is the `height: 0` 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 [this fiddle](http://jsfiddle.net/0hy80ksj/).