Corner material design makes the map square

Question

Corner material design makes the map square

I have a material design map. There is an iframe inside this map. Iframe should be a square. Its width and height are set to 100%.

The width of the square is set to layout="column" flex="33"in the parent tag. How can I make the height of this square equal to the width?

<div layout="column" flex="33">
    <md-input-container>
        <label>Project Name</label>
        <input ng-model="sprites.list[sprites.list.length-1].name" md-maxlength="30" type="text">
    </md-input-container>

    <run-project></run-project>

    <sprites-list></sprites-list>
</div>

<blocks-list></blocks-list>
<editor></editor>