Swiper внутри flex элемента растягиваются слайды, mw0 не помогает

Question

Есть флекс контейнер. Внутри два элемента. Внутри каждого слайдер swiper, один из которых является thumbs(превью) для другого. На планшетных разрешениях контейнер складывается в flex-direction: column-reverse; и в этот момент свайпер ломается, начинает растягивать слайды. Проблема распостраненная, раньше всегда решалось через min-width: 0 для флекс элемента, в этот раз не работает. Пробовал отключать флекс, пробовал min-height, перепробовал уже всё, что приходит в голову - ничего не работает.

    if (document.querySelector('.main-product__slider')) { 
    // Проверяем, есть ли слайдер на стронице
        // Создаем слайдер
        new Swiper('.main-product__slider', { // Указываем скласс нужного слайдера
            // Подключаем модули слайдера
            // для конкретного случая
            modules: [ Navigation, Autoplay, EffectFade, Thumbs ],
            observer: true,
            observeParents: true,
            slidesPerView: 1,
            spaceBetween: 10,
            // autoHeight: true,
            speed: 800,

            //touchRatio: 0,
            //simulateTouch: false,
            loop: true,
            //preloadImages: false,
            //lazy: true,

            // Эффекты
            // effect: 'fade',
            // autoplay: {
            //  delay: 3000,
            //  disableOnInteraction: false,
            // },

            // Пагинация
            // pagination: {
            //  el: '.slider-hero__pagination',
            //  clickable: true,
            // },

            // Скроллбар
            /*
            scrollbar: {
                el: '.swiper-scrollbar',
                draggable: true,
            },
            */

            // Кнопки "влево/вправо"
            navigation: {
                prevEl: '.preview-product__arrow_prev',
                nextEl: '.preview-product__arrow_next',
            },

            thumbs: {
                swiper: {
                    el: '.preview-product__slider',
                    slidesPerView: 6,
                    spaceBetween: 10,
                    autoHeight: true,
                    speed: 800,
                    direction: 'vertical',
                    // centeredSlides: true,

                    //touchRatio: 0,
                    //simulateTouch: false,
                    loop: true,
                    //preloadImages: false,
                    //lazy: true,

                    /*
                    // Эффекты
                    effect: 'fade',
                    */
                    // autoplay: {
                    //  delay: 3000,
                    //  disableOnInteraction: false,
                    // },

                    // Пагинация
                    // pagination: {
                    //  el: '.slider-hero__pagination',
                    //  clickable: true,
                    // },

                    // Скроллбар
                    /*
                    scrollbar: {
                        el: '.swiper-scrollbar',
                        draggable: true,
                    },
                    */

                    // Брейкпоинты
                    breakpoints: {
                        320: {
                            slidesPerView: 5,
                            direction: 'horizontal',
                        },
                        992: {
                            slidesPerView: 6,
                            direction: 'vertical',
                        },
                    },
                    }
            },
            // События
            on: {
            }
        });
    }

.product__container {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  gap: 1.25rem;
  -webkit-box-align: start;
      -ms-flex-align: start;
          align-items: flex-start;
  min-width: 0;
  min-height: 0;
}

.slider-product {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  min-width: 0;
  min-height: 0;
}

@supports (gap: clamp( 0.625rem , 0.4144736842rem  +  1.0526315789vw , 1.25rem )) {
  .slider-product {
    gap: clamp( 0.625rem , 0.4144736842rem  +  1.0526315789vw , 1.25rem );
  }
}

@supports not (gap: clamp( 0.625rem , 0.4144736842rem  +  1.0526315789vw , 1.25rem )) {
  .slider-product {
    gap: calc(0.625rem + 0.625 * (100vw - 20rem) / 59.375);
  }
}

.slider-product__preview {
  -webkit-box-flex: 0;
      -ms-flex-positive: 0;
          flex-grow: 0;
  -ms-flex-negative: 0;
      flex-shrink: 0;
}

@supports (flex-basis: clamp( 3.125rem , 2.5355263158rem  +  2.9473684211vw , 4.875rem )) {
  .slider-product__preview {
    -ms-flex-preferred-size: clamp( 3.125rem , 2.5355263158rem  +  2.9473684211vw , 4.875rem );
        flex-basis: clamp( 3.125rem , 2.5355263158rem  +  2.9473684211vw , 4.875rem );
  }
}

@supports not (flex-basis: clamp( 3.125rem , 2.5355263158rem  +  2.9473684211vw , 4.875rem )) {
  .slider-product__preview {
    -ms-flex-preferred-size: calc(3.125rem + 1.75 * (100vw - 20rem) / 59.375);
        flex-basis: calc(3.125rem + 1.75 * (100vw - 20rem) / 59.375);
  }
}

.slider-product__main {
  -webkit-box-flex: 1;
      -ms-flex: 1 1 auto;
          flex: 1 1 auto;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
}

.preview-product {
  position: relative;
  min-height: 0;
  min-width: 0;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
}

.preview-product__slider {
  overflow: hidden;
  min-height: 0;
}

.preview-product__slide {
  padding: 0.625rem;
  border-radius: 0.375rem;
  border: 1px solid #E6E6E6;
  cursor: pointer;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  position: relative;
  opacity: 0.5;
  -webkit-transition: all 0.3s ease 0s;
  -o-transition: all 0.3s ease 0s;
  transition: all 0.3s ease 0s;
}

.preview-product__slide.swiper-slide-thumb-active {
  opacity: 1;
}

.preview-product__slide.swiper-slide-thumb-active:hover::before {
  opacity: 0;
}

.preview-product__slide img {
  width: 100%;
  -o-object-fit: contain;
     object-fit: contain;
}

.preview-product__slide::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(255, 255, 255, 0.7);
  background-image: url(../img/icons/loopa.svg);
  background-repeat: no-repeat;
  background-position: center;
  opacity: 0;
  -webkit-transition: all 0.3s ease 0s;
  -o-transition: all 0.3s ease 0s;
  transition: all 0.3s ease 0s;
}

.preview-product__navigation {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  pointer-events: none;
}

.preview-product__arrow {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  cursor: pointer;
  pointer-events: all;
  -webkit-transition: all 0.3s ease 0s;
  -o-transition: all 0.3s ease 0s;
  transition: all 0.3s ease 0s;
}

.preview-product__arrow_prev {
  -webkit-transform: rotate(-180deg);
      -ms-transform: rotate(-180deg);
          transform: rotate(-180deg);
}

.main-product {
  min-width: 0;
  min-height: 0;
  position: relative;
}

.main-product__slider {
  min-width: 0;
  min-height: 0;
}

.main-product__slide img {
  width: 100%;
}

.main-product__credit {
  position: absolute;
  display: inline-block;
  top: 0;
  left: 0;
}

<link href="https://unpkg.com/swiper@8/swiper-bundle.min.css" rel="stylesheet"/>
<script src="https://unpkg.com/swiper@8/swiper-bundle.esm.browser.min.js"></script>
<div class="product__slider slider-product">
  <div class="slider-product__preview preview-product">
    <div class="preview-product__slider swiper">
      <div class="preview-product__wrapper swiper-wrapper">
        <div class="preview-product__slide swiper-slide">
          <img src="http://o97756rf.beget.tech/img/home/slider.png" alt="slide">
        </div>
        <div class="preview-product__slide swiper-slide">
          <img src="http://o97756rf.beget.tech/img/home/slider.png" alt="slide">
        </div>
        <div class="preview-product__slide swiper-slide">
          <img src="http://o97756rf.beget.tech/img/home/slider.png" alt="slide">
        </div>
        <div class="preview-product__slide swiper-slide">
          <img src="http://o97756rf.beget.tech/img/home/slider.png" alt="slide">
        </div>
        <div class="preview-product__slide swiper-slide">
          <img src="http://o97756rf.beget.tech/img/home/slider.png" alt="slide">
        </div>
        <div class="preview-product__slide swiper-slide">
          <img src="http://o97756rf.beget.tech/img/home/slider.png" alt="slide">
        </div>
      </div>
      <div class="preview-product__navigation">
        <div class="preview-product__arrow preview-product__arrow_prev">
          <img src="@img/icons/seall_arrow.svg" alt="arrow">
        </div>
        <div class="preview-product__arrow preview-product__arrow_next">
          <img src="@img/icons/seall_arrow.svg" alt="arrow">
        </div>
      </div>
    </div>
  </div>
  <div class="slider-product__main main-product">
    <div class="main-product__slider swiper">
      <div class="main-product__wrapper swiper-wrapper">
        <div class="main-product__slide swiper-slide">
          <img src="http://o97756rf.beget.tech/img/home/slider.png" alt="slide">
        </div>
        <div class="main-product__slide swiper-slide">
          <img src="http://o97756rf.beget.tech/img/home/slider.png" alt="slide">
        </div>
        <div class="main-product__slide swiper-slide">
          <img src="http://o97756rf.beget.tech/img/home/slider.png" alt="slide">
        </div>
        <div class="main-product__slide swiper-slide">
          <img src="http://o97756rf.beget.tech/img/home/slider.png" alt="slide">
        </div>
        <div class="main-product__slide swiper-slide">
          <img src="http://o97756rf.beget.tech/img/home/slider.png" alt="slide">
        </div>
        <div class="main-product__slide swiper-slide">
          <img src="http://o97756rf.beget.tech/img/home/slider.png" alt="slide">
        </div>
      </div>
    </div>
    <div class="main-product__credit">
      <div class="slide-homeslider__credit">
        Кредит 0%
      </div>
    </div>
  </div>
</div>

CodePen

Answer 1

.main-product {
  position: relative;
  @media (min-width:$tablet){
    @include adaptiveValue("min-height", 600, 300);
  }
  @media (max-width:$tablet){
    max-width: 100%;
  }

  &__slider {
    @media (max-width:$tablet){
      max-width: 100%;
    }
  }

  &__wrapper {
  }

  &__slide {
    img {
      width: 100%;
    }
  }
}

Решилось ограничением всей ветки дерева от содержимого слайда img до .container по max-width:100%, кроме последнего. Всё на планшетных разрешениях. Костыли, конечно, но работает. Причин такого поведения так и не выяснил

Answer 2

Просто добавь flex-элементу в котором находится слайдер min-width: 0; и все сразу в норму придет.

БЛОГ НА HUSL

Swiper внутри flex элемента растягиваются слайды, mw0 не помогает

Ответы (2 шт):