Erweitern iframe in Flexbox

Question

Ich versuche, die Größe einer iframe zu dehnen, um den verbleibenden Platz in meiner Web-App zu füllen. Ich weiß, dass der maximale Speicherplatz für die div zugewiesen wird (durch Hinzufügen eines Rahmens), aber die iframe Höhe selbst wird nicht erweitert, um die gesamte vertikale Höhe zu füllen.

Das Problem ist die row contentiframe füllt nicht den gesamten vertikalen Raum, obwohl die Flexbox diesen Platz entsprechend zuweist.

Irgendwelche Ideen?

.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

Hier sind zwei Dinge zu beachten:

1. Wenn Sie ein Flex-Containerelemente werden flex Elemente nur das Kind erstellen. Alle Nachkommen außer den Kindern sind nicht flex Elemente und flex-Eigenschaften gelten nicht für sie.

   Ihr iframe ist kein Flex-Element, da es ein Kind von div class="row content" ist, das ein Flex-Element ist, aber kein Flex-Container. Daher gelten keine Biegeeigenschaften und es gibt keinen Grund für die iframe zu dehnen.

2. Um Flex-Eigenschaften auf die untergeordneten Elemente von Flex-Elementen anzuwenden, müssen Sie das Flex-Element auch zu einem flexiblen Container machen. Versuchen Sie folgendes:

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

Mit der Einstellung über die iframe ‚s Elternteil (verschachtelte) flex Container werden, die iframe ein Flex Element wird und Standard-Flex-Einstellungen (einschließlich align-items: stretch) in Kraft treten. Die iframe sollte jetzt die volle Höhe des Containers einnehmen.