title: Set min-height equal to width
body: <p>I have a fluid width div which is within another block-level element.</p>
  
  <p>HTML</p>
  
  <pre><code>&lt;div&gt;&lt;/div&gt;
  </code></pre>
  
  <p>CSS</p>
  
  <pre><code>div {
      width:50%;
      min-height: /*equal to width */;
  }
  </code></pre>
  
  <p>I want the min-height set equal to the width so that it is a square shape unless there is too much content. At that point, it should expand vertically. Can this be achieved with CSS? </p>
  
  <p>What I've tried:</p>
  
  <ul>
  <li>Using percentage paddings or margins, but this only sets height, not max--height and pushes the content down.</li>
  </ul>