title: angularjs material design make card a square
body: <p>I have a material design card. Inside this card is an iframe. The iframe must be a square. It's width and height are set to 100%.</p>
  
  <p>The width of the square is set by a <code>layout="column" flex="33"</code> in a parent tag. How can I make the height of this square equal the width?</p>
  
  <pre><code>&lt;div layout="column" flex="33"&gt;
      &lt;md-input-container&gt;
          &lt;label&gt;Project Name&lt;/label&gt;
          &lt;input ng-model="sprites.list[sprites.list.length-1].name" md-maxlength="30" type="text"&gt;
      &lt;/md-input-container&gt;
  
      &lt;run-project&gt;&lt;/run-project&gt;
  
      &lt;sprites-list&gt;&lt;/sprites-list&gt;
  &lt;/div&gt;
  
  &lt;blocks-list&gt;&lt;/blocks-list&gt;
  &lt;editor&gt;&lt;/editor&gt;
  </code></pre>