如何在 flexbox 布局中保持响应式 iframe？答案

【问题标题】：How do I keep responsive iframe within a flexbox layout?如何在 flexbox 布局中保持响应式 iframe？
【发布时间】：2022-09-27 09:27:26
【问题描述】：

我有一个包含 iframe 的 flexbox 布局。当我在父 div 上使用 display: flex; 时，它不会显示 iframe。当我从父 div 中删除 flex 属性时，它会显示它。我希望能够在将 iframe 响应为子元素的同时保留 flexbox 属性。我该如何解决这个问题？

这是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%;
}

标签： html css iframe flexbox

【解决方案1】：

我认为您在 css 文件中犯了一个错误，您不必在侧 flexbox 子项中设置绝对位置

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>

【讨论】：