Flexbox iframe extension

Question

I am trying to stretch the iframe size to fill the remaining space in my web application. I know that the maximum space is allocated for a div (by adding a border), but the height of the iframe itself does not expand to fill the entire vertical height.

The problem is that the row content iframe does not fill the entire vertical space, even if flexbox allocates that space accordingly.

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:

• When you create a flex container, only children become flexible. Any descendants outside of children are not flexible elements, and the properties of flexibility do not apply to them.

  Your iframe not a flexible element because it is a child of the div class="row content" , which is a flexible element but not a flexible container. Therefore, flexibility properties are not applied, and there is no reason to stretch an iframe .

• To apply flex properties to children of flexible elements, you need to make the flexible element also a flexible container. Try the following:

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

When configured above the parent, the iframe becomes a (nested) flexible container, the iframe becomes an element of flexibility, and the default flex settings (including align-items: stretch ) take effect. iframe should now occupy the entire height of the container.