title: Maintain aspect ratio of flex item
body: <p>I have a page which is supposed to emulate a letter size piece of paper. The page is basically split into two parts, the top nav-bar and the the main part of the page.</p>
  
  <p>My code currently looks like this:</p>
  
  <p><div class="snippet" data-lang="js" data-hide="true" data-console="true" data-babel="false">
  <div class="snippet-code snippet-currently-hidden">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>html, body { height: 100%; overflow: hidden; }
  body {
    display: flex;
    flex-flow: column;
    font-family: "Arial", "Helvetica", "sans-serif";
    font-size: 1em;
  }
  .hor-nav {
    background-color: #666;
    color: white;
    height: 64px;
  }
  .main {
    display: inline-flex;
    flex: 1;
    width: 100%;
  }
  .page {
    border: 1px solid black;
    flex: 1 1 auto;
    margin: 16px;
    padding-right: 77.27975270479134%;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div class="hor-nav"&gt;
    test
  &lt;/div&gt;
  &lt;div class="main"&gt;
    &lt;div class="page"&gt;
      test
    &lt;/div&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>I have been trying to make use of the "padding %" trick but it does not seem to be working for.</p>
  
  <blockquote>
    <p>My end goal is the "paper" (an emulation of 11in tall and 8.5in wide piece of letter paper) to <em>fill</em> the remaining <em>vertical/height</em> space after the nav-bar (the grey bar at the top of the above snippet) <em>while</em> at the same time keep the aspect ratio of 11:8.5 (or 1.294:1).</p>
  </blockquote>
  
  <p>To fill the vertical space I am using a flex box and the paper is a flex-item with the property: <code>flex: 1 1 auto;</code>. This grows or shinks the paper to accommodate the change of the webpage, however, it also effects it's width.</p>
  
  <p>The most successful I have gotten is getting rid of the <code>flex: 1 1 auto;</code> and using <code>width: 77.2%;</code> (what I calculated to be the width of a piece of "paper," however this number might not be correct), except that this did not work, as it did not hold the aspect ratio, but instead just made sure the width was only 77.2% of the containing element.</p>
  
  <p><em>note: as you can see from my above snippet, I am using a <code>padding</code> as I attempted the <a href="https://stackoverflow.com/questions/1495407/maintain-the-aspect-ratio-of-a-div-with-css">padding trick</a> for this but as @Michael_B pointed out this does not work. As I have no other working code I have not been able to replace it out yet.</em></p>
  
  <blockquote>
    <p><strong>Does anyone know how to keep a flex-item aspect ratio while at the same time growing it's <em>height</em> to fill the rest of the document (of course, with the margins)</strong></p>
  </blockquote>
  
  <p>Thank you.</p>