title: css: limit element to min(container width, container height)
body: <p>Given the following:</p>
  
  <pre><code>&lt;div class="container"&gt;
      &lt;div class="content"&gt;
  
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>Is there a CSS way to dynamically set the <code>content</code> element's both height and width to the smaller value of the two (height or width) of the <code>container</code>?</p>
  
  <p>For example if the <code>container</code> is <code>460x320</code> then <code>content</code> needs to be <code>320x320</code>.  If <code>container</code> is <code>240x333</code> then <code>content</code> should be <code>240x240</code>.<br>
  The size of the <code>container</code> are not known in advance so using fixed values won't work.<br>
  I've tried all kind of things, from <code>max-height/max-width</code> to <code>object-fit</code> but haven't been able to make it work.</p>
  
  <p>Check this <a href="https://jsfiddle.net/L4aszegd/" rel="nofollow noreferrer">jsfiddle for a demo</a> (using javascript)</p>
  
  <p>It's quite easy to do with JavaScript, but I'm looking for a CSS only trick, if it's possible.</p>