Question

我遇到iframe内部的flexbox布局问题。布局在普通视图中工作正常，但一旦置于iframe内（如此片段或codepen等），第二个flex列的flex子级不再具有相同的高度。

我无法真正向您展示差异，因为所有代码段都会自动放入iframe中......

*,
*::before,
*::after {
  box-sizing: border-box;
}

.b-block {
  margin: 0 auto;
  max-width: 1000px;
  padding: 10px;
}

.b-block__wrap {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  margin: 0 -10px;
}

.b-block__item,
.b-block__item--large {
  width: 100%;
  flex: 0 0 100%;
  max-width: 100%;
  display: flex;
  flex-direction: column;
  padding: 0 10px;
  margin-bottom: 10px;
  justify-content: space-between;
}

@media (min-width: 992px) {
  .b-block__item,
  .b-block__item--large {
    flex: 0 0 50%;
    max-width: 50%;
    margin-bottom: 0;
  }
}

.b-article,
.b-article--large {
  display: flex;
  flex: 1; /* works in a div but not in an iframe */
  /* flex: 0 1 auto; // works but without equal heights */
  padding: 10px;
  font-size: 16px;
  background: #eee;
}

.b-article:not(:last-child) {
  margin-bottom: 10px;
}

.b-article--large {
  min-height: 300px;
}

<section class="b-block">
  <div class="b-block__wrap">
    <div class="b-block__item--large">
      <article class="b-article--large">Vivamus erat sit habitasse nisi quam penatibus proin nascetur hac volutpat porttitor ad condimentum mauris aenean fames lectus tincidunt inceptos
      </article>
    </div>
    <div class="b-block__item">
      <article class="b-article">Convallis at posuere leo convallis. Sed blandit augue vitae augue scelerisque bibendum. Vivamus sit amet libero turpis, non venenatis urna.
      </article>
      <article class="b-article">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus quis lectus metus, at posuere neque. Sed pharetra nibh eget orci convallis at posuere leo convallis. Sed blandit augue vitae augue scelerisque bibendum. Vivamus sit amet libero turpis, non venenatis urna. In blandit, odio convallis suscipit venenatis, ante ipsum cursus augue.
      </article>
      <article class="b-article">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus quis lectus metus, at posuere neque.
      </article>
    </div>
  </div>
</section>

这有什么解决方法吗？我已经尝试过了：

•将第二个b-article中的b-block__item包含在一个额外的div中 •将b-article中的b-block__item的flex属性设置为flex: 0 1 33%;

但还没有运气。这在iframe中甚至可能吗？

谢谢！

Flexbox在iframe中的平均高度不起作用？

0 个答案: