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

131
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>

Пример: Codepen

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

READ ALSO
jquery is not defined

jquery is not defined

Пытаюсь подключить плагин, чтобы на сайте была возможность включить версию для слабовидящих

194
Настройка плагина jquery mask

Настройка плагина jquery mask

Помогите настроить плагин jquery mask для номера телефона таким образом, чтобы маска состояла из набора +7 (495)

262
ошибка &#39;document is not defined. [no - undef]&#39;

ошибка 'document is not defined. [no - undef]'

И снова здравствуйте всем! Пытаюсь подключить плагин, чтобы на сайте была возможность включить версию для слабовидящихВыскакивает критическая...

260
C# WPF максимизация окна когда WindowStyle == None

C# WPF максимизация окна когда WindowStyle == None

Есть главное окно (WindowStyle = None) которому я задал

220