Slick-carousel внутри flex

Question

Если slick-carousel находится внутри flex обёртки, то при прокрутке слайды исчезают и постоянно увеличивается ширина самой карусели(не говоря уже о том,что overflow:hidden просто не работает почему-то). Мне нужно расположить слева заголовок, а справа саму карусель, метода легче, чем обернуть их flex'ом я не знаю, но если так делать, то карусель ломается. Вот и хотелось бы узнать, почему она ломается и есть ли способ её подружить с flex(видел на сайте, что карусель спокойно находится внутри флекса и всё работает, не могу понять, почему у меня не так) https://codepen.io/tomatobrains/pen/zYrPerz

<div class="qualification">
  <div class="qualification__certificate">
    <div class="qualification__certificate-descr">
      <h3>Сертификаты и дипломы <span class="light">наших мастеров</span></h3>
      <div class="qualification__certificate-link borderDashed">
        <a class="linkColorRoze" href="/">Смотреть все сертификаты</a>
      </div>
    </div>
    <div class="qualification__certificate-items">
      <div class="arrowLeftBot">
        <img src="img/qualification/arrowLeft.png" alt="назад">
      </div>
      <div class="qualification__certificate-wraper">
        <div class="qualification__certificate-img">
          <img src="img/qualification/flower.png" alt="цветок">
        </div>
        <div class="qualification__certificate-slider">
          <div class="qualification__certificate-item">
            <img src="https://bipbap.ru/wp-content/uploads/2017/05/VOLKI-krasivye-i-ochen-umnye-zhivotnye.jpg" alt="сертификат">
          </div>
          <div class="qualification__certificate-item">
            <img src="https://bipbap.ru/wp-content/uploads/2017/05/VOLKI-krasivye-i-ochen-umnye-zhivotnye.jpg" alt="сертификат">
          </div>
          <div class="qualification__certificate-item">
            <img src="https://bipbap.ru/wp-content/uploads/2017/05/VOLKI-krasivye-i-ochen-umnye-zhivotnye.jpg" alt="сертификат">
          </div>
          <div class="qualification__certificate-item">
            <img src="https://bipbap.ru/wp-content/uploads/2017/05/VOLKI-krasivye-i-ochen-umnye-zhivotnye.jpg" alt="сертификат">
          </div>
          <div class="qualification__certificate-item">
            <img src="https://bipbap.ru/wp-content/uploads/2017/05/VOLKI-krasivye-i-ochen-umnye-zhivotnye.jpg" alt="сертификат">
          </div>
          <div class="qualification__certificate-item">
            <img src="https://bipbap.ru/wp-content/uploads/2017/05/VOLKI-krasivye-i-ochen-umnye-zhivotnye.jpg" alt="сертификат">
          </div>
        </div>
      </div>
      <div class="arrowRightBot">
        <img src="img/qualification/arrowRight.png" alt="назад">
      </div>
    </div>
  </div>
</div>

.qualification {
  &__certificate {
    display:flex;
    padding: 0 6.25vw;
    position: relative;

    margin-top: 4.792vw;
    &-descr {
      text-align: left;
      width: 14.323vw;
      margin-right: 3.906vw;
    }
    &-items {
      margin-left: 22vw;
      position: relative;
    }
    &-link {
      display: inline-block;
      margin-top: 1.302vw;
      & a {
        font-size:11px;
      }
    }
    &-wraper {
      position: relative;
    }
    &-img {
      position: absolute;
      z-index: 2;
      left: -8vw;
      bottom: -1vw;
      width: 20.292vw;
    }
  }
}
.arrowLeft {
  position: absolute;
  top: 50%;
  left: -7vw;
}
.arrowRightBot {
  position: absolute;
  top: 50%;
  right: -3.5vw;
  transform: translate(0, -50%);
}
.arrowLeftBot {
  position: absolute;
  top: 50%;
  left: -6.5vw;
  transform: translate(0, -50%);
}
.arrowRight {
  position: absolute;
  top: 50%;
  right: -7vw;
}
.purple {
  color: #9770b6;
}

Answer 1

добавьте контейнеру слайдера ширину, а отступы между заголовком и слайдером можно в padding убрать, или перевести в vw. Добавить max-width картинкам. Также vw лучше заменить на %, или если очень нужны, то считать все вместе - ширина описания + ширина слайдера - паддинги по бокам контейнера. Иначе появится прокрутка.

$(".qualification__certificate-slider").slick({
  slidesToShow: 4,
  slidesToScroll: 1,
  dots: false,
  infinite: false,
  nextArrow: $(".arrowRightBot"),
  prevArrow: $(".arrowLeftBot"),
  responsive: [{
      breakpoint: 900,
      settings: {
        slidesToShow: 2,
        slidesToScroll: 1,
      },
    },
    {
      breakpoint: 768,
      settings: {
        slidesToShow: 1,
        slidesToScroll: 1,
      },
    },
    {
      breakpoint: 576,
      settings: {
        slidesToShow: 1,
        slidesToScroll: 1,
      },
    },
  ],
});

.qualification__certificate {
  display: flex;
  padding: 0 6.25vw;
  position: relative;
  margin-top: 4.792vw;
  box-sizing: border-box;
}

.qualification__certificate-descr {
  text-align: left;
  width: 14.323%;
  padding-left: 22px;
  margin-right: 3.906vw;
  box-sizing: border-box;
}

.qualification__certificate-items {
  /* margin-left: 22vw; */
  width: 81%;
  position: relative;
}
.qualification__certificate-items img {
  max-width: 100%;
}

.qualification__certificate-link {
  display: inline-block;
  margin-top: 1.302vw;
}

.qualification__certificate-link a {
  font-size: 11px;
}

.qualification__certificate-wraper {
  position: relative;
}

.qualification__certificate-img {
  position: absolute;
  z-index: 2;
  left: -8vw;
  bottom: -1vw;
  width: 20.292vw;
}

.arrowLeft {
  position: absolute;
  top: 50%;
  left: -7vw;
}

.arrowRightBot {
  position: absolute;
  top: 50%;
  right: -3.5vw;
  transform: translate(0, -50%);
}

.arrowLeftBot {
  position: absolute;
  top: 50%;
  left: -6.5vw;
  transform: translate(0, -50%);
}

.arrowRight {
  position: absolute;
  top: 50%;
  right: -7vw;
}

.purple {
  color: #9770b6;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.9.0/slick.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.9.0/slick.css" rel="stylesheet" />
<link href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.9.0/slick-theme.css" rel="stylesheet" />

<div class="qualification">
  <div class="qualification__certificate">
    <div class="qualification__certificate-descr">
      <h3>Сертификаты и дипломы <span class="light">наших мастеров</span></h3>
      <div class="qualification__certificate-link borderDashed">
        <a class="linkColorRoze" href="/">Смотреть все сертификаты</a>
      </div>
    </div>
    <div class="qualification__certificate-items">
      <div class="arrowLeftBot">
        <img src="img/qualification/arrowLeft.png" alt="назад">
      </div>
      <div class="qualification__certificate-wraper">
        <div class="qualification__certificate-img">
          <img src="img/qualification/flower.png" alt="цветок">
        </div>
        <div class="qualification__certificate-slider">
          <div class="qualification__certificate-item">
            <img src="https://bipbap.ru/wp-content/uploads/2017/05/VOLKI-krasivye-i-ochen-umnye-zhivotnye.jpg" alt="сертификат">
          </div>
          <div class="qualification__certificate-item">
            <img src="https://bipbap.ru/wp-content/uploads/2017/05/VOLKI-krasivye-i-ochen-umnye-zhivotnye.jpg" alt="сертификат">
          </div>
          <div class="qualification__certificate-item">
            <img src="https://bipbap.ru/wp-content/uploads/2017/05/VOLKI-krasivye-i-ochen-umnye-zhivotnye.jpg" alt="сертификат">
          </div>
          <div class="qualification__certificate-item">
            <img src="https://bipbap.ru/wp-content/uploads/2017/05/VOLKI-krasivye-i-ochen-umnye-zhivotnye.jpg" alt="сертификат">
          </div>
          <div class="qualification__certificate-item">
            <img src="https://bipbap.ru/wp-content/uploads/2017/05/VOLKI-krasivye-i-ochen-umnye-zhivotnye.jpg" alt="сертификат">
          </div>
          <div class="qualification__certificate-item">
            <img src="https://bipbap.ru/wp-content/uploads/2017/05/VOLKI-krasivye-i-ochen-umnye-zhivotnye.jpg" alt="сертификат">
          </div>
        </div>
      </div>
      <div class="arrowRightBot">
        <img src="img/qualification/arrowRight.png" alt="назад">
      </div>
    </div>
  </div>
</div>

БЛОГ НА HUSL

Slick-carousel внутри flex

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