Сегодня я опробовал этот слайдер и обнаружил странное поведение, если элемент над слайдером - это flexbox.Слайдер просто не учитывается в максимальной ширине.В примере с кодом https://codepen.io/obendev/pen/wbzXEa я попытался показать его вам как можно лучше.
var swiper = new Swiper(".swiper-container", {
// spaceBetween: "8px",
loop: true
});
* {
box-sizing: border-box;
margin: 0;
outline: none;
padding: 0;
}
html {
font-family: "Google Sans", sans-serif;
font-size: 16px;
font-weight: 400;
}
body {
background: #fff;
}
.site-width {
border: 2px solid #f44336;
margin: 2rem auto;
max-width: 80rem;
padding: 3.125rem;
}
.c-text-slider {
display: flex;
justify-content: space-between;
}
.c-text-slider__text {
border: 2px solid #f44336;
max-width: 200px;
padding: 0.5rem;
}
.c-text-slider__slider {
border: 2px solid #f44336;
padding: 0.5rem;
}
.c-text-slider__text + .c-text-slider__slider {
margin-left: 0.5rem;
}
.myelement {
border: 2px solid #f44336;
padding: 0.5rem;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/Swiper/4.5.0/css/swiper.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Swiper/4.5.0/js/swiper.min.js"></script>
<div class="site-width">
<div class="c-text-slider">
<div class="c-text-slider__text">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Donec ultrices tincidunt arcu non sodales neque.</p>
</div>
<div class="c-text-slider__slider">
<div class="swiper-container">
<div class="swiper-wrapper">
<div class="swiper-slide myelement">
<p>1 Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Donec ultrices tincidunt arcu non sodales neque. Scelerisque varius morbi enim nunc faucibus a pellentesque.
Faucibus turpis in eu mi bibendum neque egestas. Luctus venenatis lectus magna fringilla urna porttitor rhoncus dolor purus. Tempor nec feugiat nisl pretium. Ridiculus mus mauris vitae ultricies leo integer.</p>
</div>
<div class="swiper-slide myelement">
<p>2 Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Donec ultrices tincidunt arcu non sodales neque. Scelerisque varius morbi enim nunc faucibus a pellentesque.
Faucibus turpis in eu mi bibendum neque egestas. Luctus venenatis lectus magna fringilla urna porttitor rhoncus dolor purus. Tempor nec feugiat nisl pretium. Ridiculus mus mauris vitae ultricies leo integer.</p>
</div>
<div class="swiper-slide myelement">
<p>3 Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Donec ultrices tincidunt arcu non sodales neque. Scelerisque varius morbi enim nunc faucibus a pellentesque.
Faucibus turpis in eu mi bibendum neque egestas. Luctus venenatis lectus magna fringilla urna porttitor rhoncus dolor purus. Tempor nec feugiat nisl pretium. Ridiculus mus mauris vitae ultricies leo integer.</p>
</div>
<div class="swiper-slide myelement">
<p>4 Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Donec ultrices tincidunt arcu non sodales neque. Scelerisque varius morbi enim nunc faucibus a pellentesque.
Faucibus turpis in eu mi bibendum neque egestas. Luctus venenatis lectus magna fringilla urna porttitor rhoncus dolor purus. Tempor nec feugiat nisl pretium. Ridiculus mus mauris vitae ultricies leo integer.</p>
</div>
</div>
</div>
</div>
</div>
</div>
При использовании spaceBetween он подходит к заданному размеру, хотя я больше не могу правильно скользить.
Я мог бы также дать верхнему элементу максимальную ширину, но это не правильно.Это ошибка или я что-то не так делаю?
Вот еще 2 снимка экрана:
При посещении сайта: 
После изменения размера страницы: 