Firefox 的 Flex 基础问题

Question

我正在构建一个需要渲染的图像滑块，如以下屏幕截图所示：

我设法用以下代码实现了这个设计：

.slider {
  display: flex;
}

.slider .slide.posts-2 {
  width: 28.125vw;
}

.slider .slide.posts-3 {
  width: 37.5vw;
}

.slider .slide {
  display: flex;
  flex-wrap: wrap;
}

.slider .slide.posts-3 .wp-block-jn-artist-carousel__post {
  flex-basis: calc(50% - 15px);
}

.slider .slide.posts-3 .wp-block-jn-artist-carousel__post {
  flex-grow: 1;
}

.slider .slide.posts-2 .wp-block-jn-artist-carousel__post {
  flex-grow: 1;
}

.slider .slide .wp-block-jn-artist-carousel__post {
  padding: 0 15px 15px 0;
}

.slider .slide .wp-block-jn-artist-carousel__post .wp-block-jn-artist-carousel__post-thumbnail {
  position: relative;
}

.slider .slide .wp-block-jn-artist-carousel__post .wp-block-jn-artist-carousel__post-thumbnail .wp-block-jn-artist-carousel__post-title {
  bottom: 7.5px;
  left: 22.5px;
  opacity: 0;
  position: absolute;
  right: 7.5px;
  transition: opacity .3s;
  will-change: opacity;
}

.slider .slide .wp-block-jn-artist-carousel__post .wp-block-jn-artist-carousel__post-thumbnail:hover .wp-block-jn-artist-carousel__post-title {
  opacity: 1;
}

img {
  border: 0;
  height: auto;
  max-width: 100%;
  vertical-align: middle;
  border-style: none;
}

.slider .slide .wp-block-jn-artist-carousel__post .wp-block-jn-artist-carousel__post-thumbnail img {
  aspect-ratio: 1/1;
  object-fit: cover;
  transition: opacity .3s;
  will-change: opacity;
}

<div class="slider">
  <div class="slide posts-2">
    <article id="post-211" class="wp-block-jn-artist-carousel__post">
      <div class="wp-block-jn-artist-carousel__post-thumbnail">
        <a href="https://example.com/artist/antonio-galvez/"><img fetchpriority="high" decoding="async" src="https://placehold.co/1000x700" width="1000" height="700"></a>
        <h2 class="wp-block-jn-artist-carousel__post-title">Antonio Gálvez</h2>
      </div>
    </article>
    <article id="post-4371" class="wp-block-jn-artist-carousel__post">
      <div class="wp-block-jn-artist-carousel__post-thumbnail">
        <a href="https://example.com/artist/marti-guixe/"><img fetchpriority="high" decoding="async" src="https://placehold.co/1000x700" width="1000" height="700"></a>
        <h2 class="wp-block-jn-artist-carousel__post-title">Martí Guixé</h2>
      </div>
    </article>
  </div>
  <div class="slide posts-3">
    <article id="post-4369" class="wp-block-jn-artist-carousel__post">
      <div class="wp-block-jn-artist-carousel__post-thumbnail">
        <a href="https://example.com/artist/marcel-pey/"><img fetchpriority="high" decoding="async" src="https://placehold.co/1000x700" width="1000" height="700"></a>
        <h2 class="wp-block-jn-artist-carousel__post-title">Marcel Pey</h2>
      </div>
    </article>
    <article id="post-197" class="wp-block-jn-artist-carousel__post">
      <div class="wp-block-jn-artist-carousel__post-thumbnail">
        <a href="https://example.com/artist/ton-sirera/"><img fetchpriority="high" decoding="async" src="https://placehold.co/1000x700" width="1000" height="700"></a>
        <h2 class="wp-block-jn-artist-carousel__post-title">Ton Sirera</h2>
      </div>
    </article>
    <article id="post-4374" class="wp-block-jn-artist-carousel__post">
      <div class="wp-block-jn-artist-carousel__post-thumbnail">
        <a href="https://example.com/artist/jean-marie-del-moral/"><img fetchpriority="high" decoding="async" src="https://placehold.co/1000x700" width="1000" height="700"></a>
        <h2 class="wp-block-jn-artist-carousel__post-title">Jean Marie del Moral</h2>
      </div>
      <div></div>
    </article>
  </div>
  <div class="slide posts-2">
    <article id="post-223" class="wp-block-jn-artist-carousel__post">
      <div class="wp-block-jn-artist-carousel__post-thumbnail">
        <a href="https://example.com/artist/valentin-vallhonrat/"><img fetchpriority="high" decoding="async" src="https://placehold.co/1000x700" width="1000" height="700"></a>
        <h2 class="wp-block-jn-artist-carousel__post-title">Valentin Vallhonrat</h2>
      </div>
    </article>
    <article id="post-2302" class="wp-block-jn-artist-carousel__post">
      <div class="wp-block-jn-artist-carousel__post-thumbnail">
        <a href="https://example.com/artist/nathalie-van-doxell-2/"><img fetchpriority="high" decoding="async" src="https://placehold.co/1000x700" width="1000" height="700"></a>
        <h2 class="wp-block-jn-artist-carousel__post-title">Nathalie van Doxell</h2>
      </div>
    </article>
  </div>
  <div class="slide posts-3">
    <article id="post-219" class="wp-block-jn-artist-carousel__post">
      <div class="wp-block-jn-artist-carousel__post-thumbnail">
        <a href="https://example.com/artist/alejandro-cabrera/"><img fetchpriority="high" decoding="async" src="https://placehold.co/1000x700" width="1000" height="700"></a>
        <h2 class="wp-block-jn-artist-carousel__post-title">Alejandro Cabrera</h2>
      </div>
    </article>
    <article id="post-199" class="wp-block-jn-artist-carousel__post">
      <div class="wp-block-jn-artist-carousel__post-thumbnail">
        <a href="https://example.com/artist/agusti-centelles/"><img fetchpriority="high" decoding="async" src="https://placehold.co/1000x700" width="1000" height="700"></a>
        <h2 class="wp-block-jn-artist-carousel__post-title">Agustí Centelles</h2>
      </div>
    </article>
    <article id="post-5988" class="wp-block-jn-artist-carousel__post">
      <div class="wp-block-jn-artist-carousel__post-thumbnail">
        <a href="https://example.com/artist/giuseppe-de-mattia/"><img fetchpriority="high" decoding="async" src="https://placehold.co/1000x700" width="1000" height="700"></a>
        <h2 class="wp-block-jn-artist-carousel__post-title">Giuseppe de Mattia</h2>
      </div>
    </article>
  </div>

</div>

代码在 Chrome 中按预期工作，但在 Firefox 中，如果我调整屏幕大小，有时会显示设计，如以下屏幕截图所示：

似乎在包含 3 个图像的幻灯片中有时会忽略

flex-basis: calc(50% - 15px)

属性，而是将它们堆叠在 Firefox 中。

有办法解决这个问题吗？

Answer 1

        .slider {
  display: flex;
}

.slider .slide.posts-2 {
  width: 28.125vw;
  gap: 15px;
}

.slider .slide.posts-3 {
  width: 37.5vw;
  gap: 15px;
  padding: 0 15px;
}

.slider .slide {
  display: flex;
  flex-wrap: wrap;
}

.slider .slide.posts-3 .wp-block-jn-artist-carousel__post {
  flex-basis: calc(50% - 15px);
}

.slider .slide.posts-3 .wp-block-jn-artist-carousel__post {
  flex-grow: 1;
}

.slider .slide.posts-2 .wp-block-jn-artist-carousel__post {
  flex-grow: 1;
}

.slider .slide .wp-block-jn-artist-carousel__post {
  /*! padding: 0 15px 15px 0; */
}

.slider .slide .wp-block-jn-artist-carousel__post .wp-block-jn-artist-carousel__post-thumbnail {
  position: relative;
}

.slider .slide .wp-block-jn-artist-carousel__post .wp-block-jn-artist-carousel__post-thumbnail .wp-block-jn-artist-carousel__post-title {
  bottom: 7.5px;
  left: 22.5px;
  opacity: 0;
  position: absolute;
  right: 7.5px;
  transition: opacity .3s;
  will-change: opacity;
}

.slider .slide .wp-block-jn-artist-carousel__post .wp-block-jn-artist-carousel__post-thumbnail:hover .wp-block-jn-artist-carousel__post-title {
  opacity: 1;
}

img {
  border: 0;
  height: auto;
  max-width: 100%;
  vertical-align: middle;
  border-style: none;
}

.slider .slide .wp-block-jn-artist-carousel__post .wp-block-jn-artist-carousel__post-thumbnail img {
  aspect-ratio: 1/1;
  object-fit: cover;
  transition: opacity .3s;
  will-change: opacity;
}
    

<div class="slider">
  <div class="slide posts-2">
    <article id="post-211" class="wp-block-jn-artist-carousel__post">
      <div class="wp-block-jn-artist-carousel__post-thumbnail">
        <a href="https://example.com/artist/antonio-galvez/"><img fetchpriority="high" decoding="async" src="https://placehold.co/1000x700" width="1000" height="700"></a>
        <h2 class="wp-block-jn-artist-carousel__post-title">Antonio Gálvez</h2>
      </div>
    </article>
    <article id="post-4371" class="wp-block-jn-artist-carousel__post">
      <div class="wp-block-jn-artist-carousel__post-thumbnail">
        <a href="https://example.com/artist/marti-guixe/"><img fetchpriority="high" decoding="async" src="https://placehold.co/1000x700" width="1000" height="700"></a>
        <h2 class="wp-block-jn-artist-carousel__post-title">Martí Guixé</h2>
      </div>
    </article>
  </div>
  <div class="slide posts-3">
    <article id="post-4369" class="wp-block-jn-artist-carousel__post">
      <div class="wp-block-jn-artist-carousel__post-thumbnail">
        <a href="https://example.com/artist/marcel-pey/"><img fetchpriority="high" decoding="async" src="https://placehold.co/1000x700" width="1000" height="700"></a>
        <h2 class="wp-block-jn-artist-carousel__post-title">Marcel Pey</h2>
      </div>
    </article>
    <article id="post-197" class="wp-block-jn-artist-carousel__post">
      <div class="wp-block-jn-artist-carousel__post-thumbnail">
        <a href="https://example.com/artist/ton-sirera/"><img fetchpriority="high" decoding="async" src="https://placehold.co/1000x700" width="1000" height="700"></a>
        <h2 class="wp-block-jn-artist-carousel__post-title">Ton Sirera</h2>
      </div>
    </article>
    <article id="post-4374" class="wp-block-jn-artist-carousel__post">
      <div class="wp-block-jn-artist-carousel__post-thumbnail">
        <a href="https://example.com/artist/jean-marie-del-moral/"><img fetchpriority="high" decoding="async" src="https://placehold.co/1000x700" width="1000" height="700"></a>
        <h2 class="wp-block-jn-artist-carousel__post-title">Jean Marie del Moral</h2>
      </div>
      <div></div>
    </article>
  </div>
  <div class="slide posts-2">
    <article id="post-223" class="wp-block-jn-artist-carousel__post">
      <div class="wp-block-jn-artist-carousel__post-thumbnail">
        <a href="https://example.com/artist/valentin-vallhonrat/"><img fetchpriority="high" decoding="async" src="https://placehold.co/1000x700" width="1000" height="700"></a>
        <h2 class="wp-block-jn-artist-carousel__post-title">Valentin Vallhonrat</h2>
      </div>
    </article>
    <article id="post-2302" class="wp-block-jn-artist-carousel__post">
      <div class="wp-block-jn-artist-carousel__post-thumbnail">
        <a href="https://example.com/artist/nathalie-van-doxell-2/"><img fetchpriority="high" decoding="async" src="https://placehold.co/1000x700" width="1000" height="700"></a>
        <h2 class="wp-block-jn-artist-carousel__post-title">Nathalie van Doxell</h2>
      </div>
    </article>
  </div>
  <div class="slide posts-3">
    <article id="post-219" class="wp-block-jn-artist-carousel__post">
      <div class="wp-block-jn-artist-carousel__post-thumbnail">
        <a href="https://example.com/artist/alejandro-cabrera/"><img fetchpriority="high" decoding="async" src="https://placehold.co/1000x700" width="1000" height="700"></a>
        <h2 class="wp-block-jn-artist-carousel__post-title">Alejandro Cabrera</h2>
      </div>
    </article>
    <article id="post-199" class="wp-block-jn-artist-carousel__post">
      <div class="wp-block-jn-artist-carousel__post-thumbnail">
        <a href="https://example.com/artist/agusti-centelles/"><img fetchpriority="high" decoding="async" src="https://placehold.co/1000x700" width="1000" height="700"></a>
        <h2 class="wp-block-jn-artist-carousel__post-title">Agustí Centelles</h2>
      </div>
    </article>
    <article id="post-5988" class="wp-block-jn-artist-carousel__post">
      <div class="wp-block-jn-artist-carousel__post-thumbnail">
        <a href="https://example.com/artist/giuseppe-de-mattia/"><img fetchpriority="high" decoding="async" src="https://placehold.co/1000x700" width="1000" height="700"></a>
        <h2 class="wp-block-jn-artist-carousel__post-title">Giuseppe de Mattia</h2>
      </div>
    </article>
  </div>

</div>

删除填充，而是添加间隙以达到相同的效果。