title: Expanding iframe within Flexbox
body: <p>I am trying to stretch the size of an <code>iframe</code> to fill the remaining space within my web app. I know the maximum space is being allocated for the <code>div</code> (by adding a border), but the <code>iframe</code> height itself is not expanding to fill the entire vertical height.</p>
  
  <p>The problem is the <code>row content</code> <code>iframe</code> is not filling the entire vertical space, even though the flexbox is allocating that space appropriately.</p>
  
  <p>Any ideas?</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>.box {
    display: flex;
    flex-flow: column;
    height: 100vh;
  }
  .box .row.header {
    flex: 0 1 auto;
  }
  .box .row.content {
    flex: 1 1 auto;
  }
  .box .row.footer {
    flex: 0 1 40px;
  }
  .row.content iframe {
    width: 100%;
    border: 0;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div class="box"&gt;
    &lt;div class="row header"&gt;
      &lt;h1&gt;Event Details&lt;/h1&gt;
      &lt;div id="container"&gt;
        &lt;h5&gt;Test&lt;/h5&gt;
      &lt;/div&gt;
      &lt;div data-role="navbar"&gt;
        &lt;ul&gt;
          &lt;li&gt;&lt;a href="players.html" class="ui-btn-active ui-state-persist"&gt;Players&lt;/a&gt;
          &lt;/li&gt;
          &lt;li&gt;&lt;a href="games.html"&gt;Games&lt;/a&gt;
          &lt;/li&gt;
          &lt;li&gt;&lt;a href="chat.html"&gt;Chat&lt;/a&gt;
          &lt;/li&gt;
        &lt;/ul&gt;
      &lt;/div&gt;
    &lt;/div&gt;
    &lt;div class="row content"&gt;
      &lt;iframe src="players.html"&gt;&lt;/iframe&gt;
    &lt;/div&gt;
    &lt;div class="row footer"&gt;
      &lt;p&gt;&lt;b&gt;footer&lt;/b&gt; (fixed height)&lt;/p&gt;
    &lt;/div&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>