How to fix height: auto with flexbox in Firefox? [duplicate] - css

Question

This question already has answers here:
Why doesn't percentage padding / margin work on flex items in Firefox and Edge?
(2 answers)
Closed 5 years ago.
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?

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