I'm building an image slider that needs to be rendered as shown in the following screenshot:
I managed to implement this design with the following code:
.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>The code works as expected in Chrome, but in Firefox, if I resize the screen, sometimes the design is displayed as shown in the following screenshot:
It seems that the flex-basis: calc(50% - 15px) property is sometimes ignored in the slides containing 3 images, and instead, they are stacked in Firefox.
Is there a way to fix this?
