html - 如何在 Chrome 中调整纯 flexbox masonry 网格，它已经在 Firefox 中运行

Question

我有一个 flexbox masonry 网格，它在 firefox 中工作得很好，包括自动调整大小等。但在 Chrome 中它不起作用，检查图像。

这是我使用的SCSS代码

.jinya-vertical-art-gallery {
  flex-flow: row wrap;
  margin-left: -1rem;
  flex: 0 0 100%;
  margin-top: 2rem;
  display: flex;
  width: calc(100% + 1rem);
}

.jinya-vertical-art-gallery__page-title {
  font-family: $jinya-page-title-font-family;
  font-size: $jinya-page-title-font-size;
  width: 100%;
  display: block;
  margin-top: 2rem;
}

.jinya-vertical-art-gallery__artwork {
  height: 15rem;
  padding: 0.5rem;
  border: none;
  width: auto;
  box-sizing: content-box;
  display: flex;
  flex: 1 1 auto;
  flex-flow: row nowrap;
  justify-content: flex-start;
  margin: 0;
  max-width: 27rem;
}

.jinya-vertical-art-gallery-artwork__image {
  flex: 1 1 auto;
  height: 15rem;
  width: 100%;
  margin: 0;
  object-fit: cover;
  max-width: 27rem;
  cursor: pointer;
}

.jinya-vertical-art-gallery__caption {
  display: none;
}

.jinya-vertical-art-gallery-caption__title {
  margin: 0 0 1rem;
  display: block;
  font-size: $jinya-vertical-art-gallery-caption-font-size;
  font-weight: $jinya-vertical-art-gallery-caption-font-weight;
  font-family: $heading-font-family;
}

这是呈现的 HTML:

<div class="jinya-vertical-art-gallery">
<figure class="jinya-vertical-art-gallery__artwork"> <img class="jinya-vertical-art-gallery-artwork__image" src="https://picsum.photos/200/320" alt="Aokigahara"> </figure>
<figure class="jinya-vertical-art-gallery__artwork"> <img class="jinya-vertical-art-gallery-artwork__image" src="https://picsum.photos/270/350" alt="Zack"> </figure>
<figure class="jinya-vertical-art-gallery__artwork"> <img class="jinya-vertical-art-gallery-artwork__image" src="https://picsum.photos/230/320" alt="Final touch"> </figure>
<figure class="jinya-vertical-art-gallery__artwork"> <img class="jinya-vertical-art-gallery-artwork__image" src="https://picsum.photos/300/280" alt="autumn"> </figure>
<figure class="jinya-vertical-art-gallery__artwork"> <img class="jinya-vertical-art-gallery-artwork__image" src="https://picsum.photos/410/620" alt="Treehouse"> </figure>
<figure class="jinya-vertical-art-gallery__artwork"> <img class="jinya-vertical-art-gallery-artwork__image" src="https://picsum.photos/190/390" alt="Treehouse Process"> </figure>
<figure class="jinya-vertical-art-gallery__artwork"> <img class="jinya-vertical-art-gallery-artwork__image" src="https://picsum.photos/240/250" alt="Gentle"> </figure>
<figure class="jinya-vertical-art-gallery__artwork"> <img class="jinya-vertical-art-gallery-artwork__image" src="https://picsum.photos/210/380" alt="Lolita"> </figure>
<figure class="jinya-vertical-art-gallery__artwork"> <img class="jinya-vertical-art-gallery-artwork__image" src="https://picsum.photos/100/320" alt="Step by Step 2"> </figure>
<figure class="jinya-vertical-art-gallery__artwork"> <img class="jinya-vertical-art-gallery-artwork__image" src="https://picsum.photos/400/370" alt="Spring"> </figure>
<figure class="jinya-vertical-art-gallery__artwork"> <img class="jinya-vertical-art-gallery-artwork__image" src="https://picsum.photos/290/310" alt="Sailor Goths"> </figure>
<figure class="jinya-vertical-art-gallery__artwork"> <img class="jinya-vertical-art-gallery-artwork__image" src="https://picsum.photos/310/300" alt="Rest"> </figure>
<figure class="jinya-vertical-art-gallery__artwork"> <img class="jinya-vertical-art-gallery-artwork__image" src="https://picsum.photos/120/360" alt="Guardian Demon"> </figure>
<figure class="jinya-vertical-art-gallery__artwork"> <img class="jinya-vertical-art-gallery-artwork__image" src="https://picsum.photos/180/280" alt="Link"> </figure>
</div>

这是它在 firefox 中的样子:

这是它在 Chrome 中的样子:

请注意，由于版权原因，图片需要模糊处理，但网格应该可见。

Answer 1

看起来你用嵌套的 flex 布局过度了布局——每个艺术品图形不需要是一个 flex 容器。删除该约束将使每个艺术品人物都采用 child 的大小 - 在这种情况下它将是艺术品。可以在下面找到示例解决方案:

.jinya-vertical-art-gallery {
  flex-flow: row wrap;
  margin-left: -1rem;
  flex: 0 0 100%;
  margin-top: 2rem;
  display: flex;
  width: calc(100% + 1rem);
}

.jinya-vertical-art-gallery__page-title {
  font-family: $jinya-page-title-font-family;
  font-size: $jinya-page-title-font-size;
  width: 100%;
  display: block;
  margin-top: 2rem;
}

.jinya-vertical-art-gallery__artwork {
  padding: 0.5rem;
  border: none;
  width: auto;
  box-sizing: content-box;
  flex: 0 0 auto;
  margin: 0;
  max-width: 27rem;
}

.jinya-vertical-art-gallery-artwork__image {
  height: 15rem;
  margin: 0;
  max-width: 27rem;
  cursor: pointer;
}

.jinya-vertical-art-gallery__caption {
  display: none;
}

.jinya-vertical-art-gallery-caption__title {
  margin: 0 0 1rem;
  display: block;
  font-size: $jinya-vertical-art-gallery-caption-font-size;
  font-weight: $jinya-vertical-art-gallery-caption-font-weight;
  font-family: $heading-font-family;
}

<div class="jinya-vertical-art-gallery">
<figure class="jinya-vertical-art-gallery__artwork"> <img class="jinya-vertical-art-gallery-artwork__image" src="https://picsum.photos/200/320" alt="Aokigahara"> </figure>
<figure class="jinya-vertical-art-gallery__artwork"> <img class="jinya-vertical-art-gallery-artwork__image" src="https://picsum.photos/270/350" alt="Zack"> </figure>
<figure class="jinya-vertical-art-gallery__artwork"> <img class="jinya-vertical-art-gallery-artwork__image" src="https://picsum.photos/230/320" alt="Final touch"> </figure>
<figure class="jinya-vertical-art-gallery__artwork"> <img class="jinya-vertical-art-gallery-artwork__image" src="https://picsum.photos/300/280" alt="autumn"> </figure>
<figure class="jinya-vertical-art-gallery__artwork"> <img class="jinya-vertical-art-gallery-artwork__image" src="https://picsum.photos/410/620" alt="Treehouse"> </figure>
<figure class="jinya-vertical-art-gallery__artwork"> <img class="jinya-vertical-art-gallery-artwork__image" src="https://picsum.photos/190/390" alt="Treehouse Process"> </figure>
<figure class="jinya-vertical-art-gallery__artwork"> <img class="jinya-vertical-art-gallery-artwork__image" src="https://picsum.photos/240/250" alt="Gentle"> </figure>
<figure class="jinya-vertical-art-gallery__artwork"> <img class="jinya-vertical-art-gallery-artwork__image" src="https://picsum.photos/210/380" alt="Lolita"> </figure>
<figure class="jinya-vertical-art-gallery__artwork"> <img class="jinya-vertical-art-gallery-artwork__image" src="https://picsum.photos/100/320" alt="Step by Step 2"> </figure>
<figure class="jinya-vertical-art-gallery__artwork"> <img class="jinya-vertical-art-gallery-artwork__image" src="https://picsum.photos/400/370" alt="Spring"> </figure>
<figure class="jinya-vertical-art-gallery__artwork"> <img class="jinya-vertical-art-gallery-artwork__image" src="https://picsum.photos/290/310" alt="Sailor Goths"> </figure>
<figure class="jinya-vertical-art-gallery__artwork"> <img class="jinya-vertical-art-gallery-artwork__image" src="https://picsum.photos/310/300" alt="Rest"> </figure>
<figure class="jinya-vertical-art-gallery__artwork"> <img class="jinya-vertical-art-gallery-artwork__image" src="https://picsum.photos/120/360" alt="Guardian Demon"> </figure>
<figure class="jinya-vertical-art-gallery__artwork"> <img class="jinya-vertical-art-gallery-artwork__image" src="https://picsum.photos/180/280" alt="Link"> </figure>
</div>