title: Make child width equal to parent height with CSS only
body: <p><img src="https://i.stack.imgur.com/a88QR.png" alt="enter image description here"></p>
  
  <p>As described by the image there are two elements: A parent (dark gray) and child (not so dark gray). The width and height of the parent is fluid. The ratio of the child i 1:1 or y:y where y is equal to the height of the parent.</p>
  
  <p>I've tried to find ways to solve this using flex, calc, padding etc but have reached the end of the road. Any ideas how to solve this with pure CSS are much appreciated.</p>
  
  <p>EDIT: I realize now I should have added more details regarding the usage of this scenario. As well as what I consider to be a dynamic height. Dynamic height for me suggests that the height is decided by the amount of content it contains. So I added some HTML to clarify. The .content div may be unnecessary if you can put the content directly in the .container div. But that depends on how you write the CSS:</p>
  
  <pre class="lang-html prettyprint-override"><code>&lt;div class="container"&gt;
    &lt;div class="content"&gt;
      Here is some text. It can be long and it can be short. 
      It will affect the height of the .container thus also 
      the height and width of the .square.
    &lt;/div&gt;
    &lt;div class="square"&gt;1:1&lt;/div&gt;
  &lt;/div&gt;
  </code></pre>