如何修复高度：在 Firefox 中使用 flexbox 自动修复？ [复制]答案

【问题标题】：How to fix height: auto with flexbox in Firefox? [duplicate]如何修复高度：在 Firefox 中使用 flexbox 自动修复？ [复制]
【发布时间】：2017-12-10 17:29:22
【问题描述】：

我对 flexbox 和 height: auto in Firefox 有疑问：

.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 和其他浏览器都可以正常工作...我真的不知道如何使它正常工作...有人吗？

【问题讨论】：

只是检查元素，当您将.portfolio a 设置为 height: 30% 时，.portfolio 没有高度（至少在 FF 中）；它占用其父级内部空间的 30%，即 0。
是的，但即使我添加到 .portfolio height: auto 问题仍然存在。
height: auto; 与不指定高度完全相同。因此自动。请参阅下面的答案：
问题不是height: auto。问题是padding-top: 30%。

标签： css firefox flexbox height

【解决方案1】：

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

将height: 30%; 设置为.portfolio 的孩子不会做任何事情，因为其逻辑是：占据父母身高的 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>

【讨论】：

是的，在 Firefox 中，它应该设置为 %、vh 或 px，但重点是 .portfolio 高度应该取决于其中的项目...
@DamianP。将height: 30%; 设置为.portfolio 的孩子不会做任何事情，因为这样做的逻辑是：占据父母身高的30%，即0（<div>s 的自动值）。如果您将.portfolio a 的高度设置为30vh（视口高度的30%）那会起作用，或者如果您可以给它一个像素值
好的...但它适用于 Chrome、Safari、Opera...
@DamianP。似乎height: auto; 在 Chrome、Safari 等中的工作方式略有不同。
好吧...我只是用了 display: box not flex...