How to fix height: auto with flexbox in Firefox?

Question

I have a problem with flexbox and 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>

When div .portfolio have height: auto, in Firefox this div is not visible. Chrome, Safari and others works fine... I really don't have idea how to make this working... anyone?

Just inspecting element, the `.portfolio` has no height (in FF at least) when you set `.portfolio a` to height: 30%; it takes 30% of the space inside it's parent, which is 0. — James Douglas, Jul 06 '17 at 15:45
Yes, but even when I add to .portfolio height: auto problem still exist. — , Jul 06 '17 at 15:47
`height: auto;` is exactly the same as not specifying the height. Hence _auto_. See my answer below: — James Douglas, Jul 06 '17 at 15:49
The problem is not `height: auto`. The problem is `padding-top: 30%`. — Michael Benjamin, Jul 06 '17 at 16:03

James Douglas · Accepted Answer · 2017-07-06T15:54:11.990

1

.portfolio has no height by default. Setting the height to auto will do nothing in this case.

Setting height: 30%; to .portfolio's children will do nothing, because the logic of that goes: take up 30% of the parent's height, which is 0. Again, if you set .portfolio a's height to 30vh (30% of the viewport height) That would work, or if you could give it a pixel value

In the example below, I've set the height to 100px but obviously you can change it to whatever you want.

.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>

edited Jul 06 '17 at 15:54

answered Jul 06 '17 at 15:47

James Douglas

3,328
2
22
43

Yes, in Firefox it should be set on %, vh or px but the point is .portfolio height should depends of items inside of it... – Jul 06 '17 at 15:51
@DamianP. Setting `height: 30%;` to `.portfolio`'s children will do nothing, because the logic of that goes: take up 30% _of the parent's height_, which is 0 (the automatic value of `
`s). If you set `.portfolio a`'s height to `30vh` (30% of the viewport height) That would work, or if you could give it a pixel value
– James Douglas Jul 06 '17 at 15:54
Ok... but it's works in Chrome, Safari, Opera... – Jul 06 '17 at 15:56
@DamianP. It seems that `height: auto;` works slightly differently in Chrome, Safari etc. – James Douglas Jul 06 '17 at 16:02
Ok... I just used display: box not flex... – Jul 06 '17 at 17:09

How to fix height: auto with flexbox in Firefox?

1 Answers1