Scaling содержание IFrame внутри Flexbox модели

Question

Я стараюсь, чтобы масштабировать содержимое в IFRAME, как это делается в этом fiddle или объяснено в этом SO - How can I scale the content of an iframe?

Разница заключается в том, что я хотел бы использовать модель Flexbox (jsfiddle) ,

HTML:

<div class="container"> 
    <div class="top">I <br> am <br> of <br> flexible <br> height</div>  
    <div class="wrap"> 
    <iframe class="frame" src="http://time.is"></iframe> 
    </div> 
</div> 

CSS:

.container { 
    display:flex; 
    flex-direction: column; 

    height:300px; 
    width: 300px; 
} 

.top { 
    display:flex; 
} 

.wrap { 
    display:flex; 
    flex:1; 

    height:100%; 
} 

.frame { 
    width: 400%; 
    height: 400%; 
    border: 0; 
    -ms-transform: scale(0.25); 
    -moz-transform: scale(0.25); 
    -o-transform: scale(0.25); 
    -webkit-transform: scale(0.25); 
    transform: scale(0.25); 

    -ms-transform-origin: 0 0; 
    -moz-transform-origin: 0 0; 
    -o-transform-origin: 0 0; 
    -webkit-transform-origin: 0 0; 
    transform-origin: 0 0; 
} 

Я попробовал его в хроме и светлячок.

Ни один из них не принимает ширину 100% для iframe.

Firefox вычисляет правильную высоту.

В хромированном положении .wrap {height: 100%} позволяет использовать iframe шириной .container.

Как получить iframe для измерения размеров .wrap?

Answer 1

Пожалуйста, проверьте это JSFiddle. Похоже, что это работает.

Я изменил классы для .wrap и .iframe:

.container { 
 
    display: flex; 
 
    flex-direction: column; 
 
    border: 3px solid red; 
 
    height: 300px; 
 
    width: 300px; 
 
} 
 

 
.top { 
 
    display: flex; 
 
    border: 3px solid green; 
 
} 
 

 
.wrap { 
 
    flex: 1; 
 
    flex-direction: column; 
 
    align-items: stretch; 
 
    border: 5px solid blue; 
 
    height: 100%; 
 

 
} 
 

 
.frame { 
 
    width: 400%; 
 
    height: 768px; 
 
    border: 0; 
 
    -ms-transform: scale(0.25); 
 
    -moz-transform: scale(0.25); 
 
    -o-transform: scale(0.25); 
 
    -webkit-transform: scale(0.25); 
 
    transform: scale(0.25); 
 

 
    -ms-transform-origin: 0 0; 
 
    -moz-transform-origin: 0 0; 
 
    -o-transform-origin: 0 0; 
 
    -webkit-transform-origin: 0 0; 
 
    transform-origin: 0 0; 
 
}

<div class="container"> 
 
    <div class="top">I <br> am <br> of <br> flexible <br> height</div> 
 
    <div class="wrap"> 
 
     <iframe class="frame" src="http://time.is"></iframe> 
 
    </div> 
 
</div>