Растягивается слайдер во flexbox контейнере

141

24 февраля 2019, 04:40

Если поместить слайдер во 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>