Estensione iframe in Flexbox

Question

Sto cercando di allungare le dimensioni di un iframe per riempire lo spazio rimanente all'interno della mia app Web. So che lo spazio massimo viene assegnato per lo div (aggiungendo un bordo), ma l'altezza iframe non si espande per riempire l'intera altezza verticale.

Il problema è che lo row contentiframe non riempie tutto lo spazio verticale, anche se il Flexbox sta allocando lo spazio in modo appropriato.

Qualche idea?

.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

Qui ci sono due cose da considerare:

1. Quando si crea un contenitore flessibile solo gli elementi figli diventati oggetti flex. Qualsiasi discendente al di fuori dei bambini è non gli oggetti flessibili e le proprietà flessibili non si applicano a loro.

   Il tuo iframe non è un articolo flessibile perché è un figlio di div class="row content" che è un articolo flessibile, ma non un contenitore flessibile. Pertanto, non si applicano proprietà flessibili e non vi è motivo di allungare lo standard iframe.

2. Per applicare le proprietà di flessibilità ai bambini di articoli flessibili, è necessario rendere l'elemento flessibile anche un contenitore flessibile. Prova questo:

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

Con la regolazione sopra genitore s' il iframe diventa un (nested) contenitore flessibile, il iframe diventa un elemento di flessione, e impostazioni di flex (tra cui align-items: stretch) entrare in vigore. Il iframe dovrebbe ora occupare l'intera altezza del contenitore.