如何在Firefox中使用flexbox修复高度自适应的问题？

Question

如何在Firefox中使用flexbox修复高度自适应的问题？

3

我在Firefox中使用flexbox和height: auto遇到了问题：

.portfolio {
  width: 100%;
  position: relative;
  overflow: visible;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: space-between;
  background-color: red;
}

.portfolio a {
  display: block;
  background-color: black;
  width: 30%;
  height: auto;
  padding-top: 30%;
  /* 1:1 Aspect Ratio */
  position: relative;
  /* If you want text inside of it */
  margin-bottom: 5%;
}

<div class="portfolio">
  <a href="#">
    <div class="portfolio_item">
    </div>
  </a>
  <a href="#">
    <div class="portfolio_item">
    </div>
  </a>
  <a href="#">
    <div class="portfolio_item">
    </div>
  </a>
  <a href="#">
    <div class="portfolio_item">
    </div>
  </a>
  <a href="#">
    <div class="portfolio_item">
    </div>
  </a>
  <a href="#">
    <div class="portfolio_item">
    </div>
  </a>
</div>

当 div .portfolio 使用 height: auto 时，在 Firefox 中这个 div 不可见。Chrome、Safari 和其他浏览器正常运行... 我真的不知道如何让它起作用... 有人能帮忙吗？

- user7798345

仅仅检查元素，当你将.portfolio a的高度设置为30%时（至少在FF中），.portfolio没有高度；它占据了其父元素内部空间的30%，而该父元素的高度为0。 - James Douglas

是的，即使我在.portfolio中添加 height: auto，问题仍然存在。 - user7798345

height: auto; 和不指定高度是完全相同的，因此为 _auto_。请参见下面的答案： - James Douglas

问题不在于 height: auto。问题在于 padding-top: 30%。 - Michael Benjamin

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- James Douglas · Accepted Answer

.portfolio默认没有高度。将高度设置为auto在这种情况下不起作用。

将.portfolio的子元素的height: 30%;设置为无效，因为其逻辑是：占据父元素高度的30%，而父元素高度为0。如果你将.portfolio a的高度设置为30vh（视口高度的30%），那么可以实现，或者给它一个像素值。

在下面的示例中，我将高度设置为100像素，但显然您可以将其更改为任何您想要的值。

.portfolio {
  width: 100%;
  height: 100px;
  position: relative;
  overflow: visible;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: space-between;
  background-color: red;
}

.portfolio a {
  display: block;
  background-color: black;
  width: 30%;
  height: auto;
  padding-top: 30%;
  /* 1:1 Aspect Ratio */
  position: relative;
  /* If you want text inside of it */
  margin-bottom: 5%;
}

<div class="portfolio">
  <a href="#">
    <div class="portfolio_item">
    </div>
  </a>
  <a href="#">
    <div class="portfolio_item">
    </div>
  </a>
  <a href="#">
    <div class="portfolio_item">
    </div>
  </a>
  <a href="#">
    <div class="portfolio_item">
    </div>
  </a>
  <a href="#">
    <div class="portfolio_item">
    </div>
  </a>
  <a href="#">
    <div class="portfolio_item">
    </div>
  </a>
</div>