title: Resizing a DIV (with a fixed width and height) and its content while maintaining its aspect ratio
body: <p>I have a DIV on a page that has a fixed width and height (600x400). However, when the viewport becomes smaller than either the DIV's width or the DIV's height, I want the DIV to resize to remain fully visible while keeping its aspect ratio the same. Additionally, I want all the elements within the DIV to resize in the same way (also maintaining the aspect ratio).</p>
  
  <p>While searching for pure CSS solutions I came across the viewport units (vw, vh, vmin, vmax). I also came across max-width and max-height. The code below shows how I combined these two. However, its a solution for resizing the DIV itself, but not the contents of the DIV.</p>
  
  <pre><code>&lt;html&gt;
  &lt;head&gt;
      &lt;style type="text/css"&gt;
          #mainDiv{
              width: 800px;
              height: 800px;
              max-width: 90vmin;
              max-height: 90vmin;
              background-color: yellow;
              position: relative;
          }
          #redSquare{
              position: absolute;
              top: 100px;
              left: 100px;
              width: 300px;
              height: 300px;
              background-color: red;
              z-index: 5;
          }
          #greenSquare{
              position: absolute;
              top: 120px;
              left: 120px;
              width: 300px;
              height: 300px;
              background-color: green;
              z-index: 10;
          }
      &lt;/style&gt;
  &lt;/head&gt;
  &lt;body&gt;
      &lt;div id="mainDiv"&gt;
          &lt;div id="greenSquare"&gt;green&lt;/div&gt;
          &lt;div id="redSquare"&gt;red&lt;/div&gt;
      &lt;/div&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>Is there a pure CSS solution that allows me to:</p>
  
  <ul>
  <li>Specify the width and height of the DIV without limitations (in pixels, percentages, and whatever other way)</li>
  <li>Specify the width and height of the elements within the div in pixels.</li>
  <li>Resize the DIV and its contents when the viewport becomes smaller than the DIV's width or height.</li>
  <li>There must be decent browser support for the solution</li>
  </ul>