[FIXED] How do I keep responsive iframe within a flexbox layout?

Issue

I have a flexbox layout that contains the iframe in it. When I use display: flex; on the parent div, it doesn't display the iframe. When I remove the flex property from the parent div, it display it. I want to be able to keep the flexbox properties whilst having iframe responsive as a child element. How do I resolve this issue?

Here's the jsfiddle.

HTML:

<div class="main-container">
  <div class="embed-div">
    <div class="embed-container">
      <iframe width="552" height="280" src="https://www.youtube.com/embed/EngW7tLk6R8?modestbranding=1&amp;rel=0" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen=""></iframe>
    </div>
  </div>

  <div class="content-container">
    <p>Marzipan topping liquorice candy chocolate. Carrot cake donut candy canes marshmallow muffin cookie jujubes shortbread cheesecake. Chocolate bar powder danish donut croissant. Cotton candy tootsie roll apple pie sesame</p>
  </div>
</div>

CSS:

.main-container {
  display: flex;
  /* removing this shows iframe, want ot keep this flexbox whilst showing iframe scaling */
  flex-direction: row;
}

.main-container .embed-container {
  position: relative;
  padding-bottom: 52.25%;
  padding-top: 30px;
  height: 0;
  overflow: hidden;
}

.main-container .embed-container iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

Solution

i think you made a mistake in your css file, you don't have to make a position absolute in side flexbox child

CSS

.main-container {
  display: flex;
  /* removing this shows iframe, want ot keep this flexbox whilst showing iframe scaling */
  flex-direction: row;
  align-items: center;

}

.main-container .embed-container {
  padding-top: 30px;
  position: relative;
  padding-bottom: 52.25%;
  height: 0;
  overflow: hidden;
}

@media (max-width: 800px) {
  .main-container {
    flex-direction: column;
  }
}

<div class="main-container">
  <div class="embed-div">
    <div class="embed-container">
      <iframe width="552" height="280" src="https://www.youtube.com/embed/EngW7tLk6R8?modestbranding=1&amp;rel=0" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen=""></iframe>
    </div>
  </div>

  <div class="content-container">
      <p>Marzipan topping liquorice candy chocolate. Carrot cake donut candy canes marshmallow muffin cookie jujubes shortbread cheesecake. Chocolate bar powder danish donut croissant. Cotton candy tootsie roll apple pie sesame</p>
    </div>
  </div>

Answered By - aknadif

Answer Checked By - Willingham (PHPFixing Volunteer)