2

Если поместить слайдер во flexbox-элемент, у которого задано свойство flex-grow: 1, слайдер неверно считает ширину и вылазит далеко за пределы элемента, даже если у родителя задана фиксированная ширина/высота.

.content {
  display: flex;
  align-items: center;
  margin: 50px auto;
  width: 50%;
  border: 2px solid red;
  box-sizing: border-box;
}

.content__photos {
  flex-grow: 1;
}

.content__button {
  flex-shrink: 0;
  margin-left: 25px;
}

.slider__slide {
  height: 100px;
  background: gray;
}
<div class="content">
  <div class="content__photos">
    <div class="slider content__slider swiper-container js-slider">
      <div class="slider__wrapper swiper-wrapper">
        <div class="slider__slide swiper-slide"></div>
        <div class="slider__slide swiper-slide"></div>
        <div class="slider__slide swiper-slide"></div>
        <div class="slider__slide swiper-slide"></div>
      </div>
    </div>
  </div>

  <button class="button content__button">Button</button>
</div>

Пример: Codepen

Кто с этим сталкивался, как решить данную проблему?

5
  • 1
    Приложите пример кода, чтобы пользователи могли наглядно видеть то, что вы имеете в виду. В таком случае шанс получить ответ увеличивается в разы.
    – user192664
    18 окт 2018 в 12:24
  • А если добавить overflow:hidden; к class="content" 19 окт 2018 в 10:59
  • Тогда просто обрежется кнопка 19 окт 2018 в 11:14
  • Вы как-то решили проблему? У меня то же самое.
    – John Smith
    15 мая 2019 в 9:28
  • Ответил на вопрос 16 мая 2019 в 10:29

1 ответ 1

1

В .content__photos добавить min-width: 0

.content__photos {
  flex-grow: 1;
  min-width: 0;
}

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge you have read our privacy policy.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.