html - Expanding iframe within Flexbox

Question

I am trying to stretch the size of an iframe to fill the remaining space within my web app. I know the maximum space is being allocated for the div (by adding a border), but the iframe height itself is not expanding to fill the entire vertical height.

The problem is the row content iframe is not filling the entire vertical space, even though the flexbox is allocating that space appropriately.

Any ideas?

.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;
}

<div class="box">
  <div class="row header">
    <h1>Event Details</h1>
    <div id="container">
      <h5>Test</h5>
    </div>
    <div data-role="navbar">
      <ul>
        <li><a href="players.html" class="ui-btn-active ui-state-persist">Players</a>
        </li>
        <li><a href="games.html">Games</a>
        </li>
        <li><a href="chat.html">Chat</a>
        </li>
      </ul>
    </div>
  </div>
  <div class="row content">
    <iframe src="players.html"></iframe>
  </div>
  <div class="row footer">
    <p><b>footer</b> (fixed height)</p>
  </div>
</div>

Answer 1

Here are two things to consider:

1. When you create a flex container only the child elements become flex items. Any descendants beyond the children are not flex items and flex properties don't apply to them.

   Your iframe is not a flex item because it is a child of div class="row content" which is a flex item, but not a flex container. Therefore, no flex properties apply and there is no reason for the iframe to stretch.

2. To apply flex properties to the children of flex items, you need to make the flex item also a flex container. Try this:

   .box .row.content {
       flex: 1 1 auto;
       display: flex; /* new */
   }
   

With the adjustment above the iframe's parent becomes a (nested) flex container, the iframe becomes a flex item, and default flex settings (including align-items: stretch) go into effect. The iframe should now occupy the full height of the container.