Flexbox: match height of element, while keeping aspect ratio

Question

I have two boxes next to each other in a flex container. One contains an iframe, the other a form. I want the iframe box to match the height of the form box, and have the iframe box keep an aspect ratio of 16:9.

I could not get the old padding-bottom: 56.25% trick to work, because that's based on width, which is tricky with Flexbox.

Here's a fiddle with an approximation of my HTML and (S)CSS, if you want to have a stab at this problem. https://jsfiddle.net/7zgh88ew/

If anyone has any ideas, they would be greatly appreciated!

I think you will have to use js for this. – Nenad Vracar Apr 03 '17 at 09:56 — Nenad Vracar, Apr 03 '17 at 09:56

score 2 · Answer 1 · edited May 23 '17 at 12:02

By using inline-flex and a dummy img having the correct ratio, set it to visibility: hidden and then position the iframe absolute, it works, only in Chrome though, so there must be some issue, as with the other browsers, the img doesn't size its parent properly.

I will post a question myself to see if someone knows anything about that, and update this post when I know more.

Update

For a fixed height, i.e 200px, one can set it on the .container and add height: 100% to the .iframe and it will work for the other browsers (solution provided by Tunçel Mert)

Still, if the size of the form-content is based on its content, it still only appears to work on Chrome.

Fiddle demo

Stack snippet

.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>

Flexbox: match height of element, while keeping aspect ratio

1 Answers1