Flexbox内でiframeを展開する

Question

iframeのサイズを拡大して、Webアプリケーション内の残りの領域を埋めるようにしています。 div（枠線を追加する）のために最大スペースが割り当てられていますが、iframeの高さ自体が縦の高さ全体を埋めるように拡張されていません。

row contentiframeは、フレックスボックスがそのスペースを適切に割り当てているにもかかわらず、垂直スペース全体を満たしていません。

アイデア？ここで

.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

を検討するために2つのものがあります：

1. あなたが唯一の子要素がフレックスアイテムとなっフレックスコンテナを作成するとき。子供以外の子孫はではなく、のフレックスアイテムとフレックスプロパティは適用されません。

   iframeはフレックスアイテムであるdiv class="row content"の子であるため、フレックスアイテムではありませんが、フレックスアイテムではありません。したがって、flexプロパティは適用されず、iframeが伸びる理由はありません。

2. フレックスアイテムの子にフレックスプロパティを適用するには、フレックスアイテムをフレックスコンテナにする必要があります。 iframeがフレックスアイテムになり、

   iframeの親以上の調整で

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

は（ネスト）フレックスコンテナになり、有効になります（align-items: stretch含む）フレックスをデフォルト設定：これを試してみてください。 iframeは、コンテナの高さ全体を占めるようになりました。