Mở rộng iframe trong Flexbox

Question

Tôi đang cố gắng kéo kích thước của iframe để lấp đầy khoảng trống còn lại trong ứng dụng web của tôi. Tôi biết không gian tối đa đang được phân bổ cho div (bằng cách thêm đường viền), nhưng chiều cao iframe không mở rộng để lấp đầy toàn bộ chiều cao dọc.

Vấn đề là row contentiframe không làm đầy toàn bộ không gian dọc, mặc dù flexbox phân bổ không gian đó một cách thích hợp.

Bất kỳ ý tưởng nào?

.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

Dưới đây là hai điều cần xem xét:

1. Khi bạn tạo một container flex chỉ các yếu tố con trở thành mục flex. Bất kỳ hậu duệ nào vượt quá trẻ em là không các mục flex và các thuộc tính flex không áp dụng cho chúng.

   iframe của bạn không phải là mặt hàng flex vì nó là con của div class="row content" là mặt hàng flex, nhưng không phải là vật chứa flex. Do đó, không có tính chất flex nào được áp dụng và không có lý do gì để mở rộng iframe.

2. Để áp dụng tính chất flex cho trẻ em của các mặt hàng flex, bạn cần phải làm cho các mặt hàng flex cũng là một container flex. Hãy thử điều này:

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

Với việc điều chỉnh trên phụ huynh 's iframe trở thành một (lồng) chứa flex, các iframe trở thành một mục flex, và thiết lập mặc định flex (bao gồm align-items: stretch) đi vào hiệu lực. iframe giờ đây sẽ chiếm toàn bộ chiều cao của vùng chứa.