フレックスボックス：要素の高さに合わせ、縦横比を維持します

Question

フレックスコンテナ内に2つのボックスが隣り合っています。 1つはiframeを含み、もう1つはフォームを含む。 iframeボックスをフォームボックスの高さに合わせ、iframeボックスの縦横比を16：9にします。

これは幅に基づいているので、私は古いpadding-bottom: 56.25%のトリックを得ることができませんでした。これはFlexboxでは難しいものです。

この問題で刺し傷をつけたい場合は、ここで私のHTMLと（S）CSSを近似したフィドルです。 https://jsfiddle.net/7zgh88ew/

誰でもアイデアがあれば、大変感謝しています。 iframeが絶対位置次いでvisibility: hiddenに設定すると、正しい比率を有するinline-flexとダミーimgを使用することにより

Answer 1

、それはしかしだけChromeで、動作するので、他のブラウザと同様に、いくつかの問題が存在しなければならない、img親のサイズを適切に調整しません。

誰かがそれについて何か知っているかどうかを確認するために自分自身で質問を投稿し、もっと知っているときはこの投稿を更新します。

更新

固定の高さのために、すなわち200px、一つは.containerにそれを設定し、.iframeにheight: 100%を追加し、それが他のブラウザ（solution provided by Tunçel Mert）のために働くだろうことができます

それでも、もしform-contentのサイズはその内容に基づいていますが、まだChromeでのみ動作するようです。

Fiddle demo

スタックは、私はあなたがこのためにJSを使用する必要があります考えて

.container { 
 
    display: inline-flex; 
 
    height: 200px; 
 
} 
 

 
.iframe { 
 
    position: relative; 
 
    height:100%; 
 
    background: red; 
 
} 
 
    .iframe img { 
 
    height:100%; 
 
    visibility: hidden; 
 
    } 
 
    .iframe iframe { 
 
    position: absolute; 
 
    left: 0; 
 
    top: 0; 
 
    height: 100%; 
 
    width: 100%; 
 
    } 
 

 
.form { 
 
    background: orange; 
 
} 
 

 
.fake-form-content { 
 
    width: 200px; 
 
}

<div class="container"> 
 
    <div class="iframe"> 
 
    <img src="http://placehold.it/160x90"> 
 
    <!-- Sorry about the video --> 
 
    <iframe src="https://www.youtube.com/embed/dQw4w9WgXcQ" frameborder="0" width="320" height="180"></iframe> 
 
    </div> 
 
    <div class="form"> 
 
    <div class="fake-form-content"> 
 
     Fake form content 
 
    </div> 
 
    </div> 
 
</div>