<分区>
我在 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 和其他浏览器工作正常...我真的不知道如何让它工作...有人吗?