javascript - Creating a square where both height and width scale with the containing div -

i'm trying create square largest possible size given div. square stretch out both width , height until reaches edge of div.

what have @ moment (http://codepen.io/andyjessop/pen/rryxpv) square keep aspect ratio width changes, here width , height of square determined solely width of containing div, if change height of outer div (by resizing window), square size stays same , goes off screen.

#square {   position: relative;   width: 50%;   margin: auto;   background: white; }  #square:after {   content: "";   display: block;   padding-bottom: 100%; } 

how can make size of square scales containing div height?