Зачем слайдеру Swiper задавать ширину 1px для класса swiper-wrapper?

Не могу понять, зачем слайдеру Swiper задавать ширину 1px, для класса swiper-wrapper.

https://codepen.io/workcode/pen/WYEovd

Видно, что блок aside не вошел.
Если прописать
.swiper-wrapper {
	width: 1px;
}

слайдер и aside вписываются в ширину экрана.
Это хак или фишка?

PS. codepen не корректно показывает, лучше скопировать код ниже и вставить в файл:
index.html
<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/Swiper/4.2.2/css/swiper.min.css">
	<link rel="stylesheet" href="style.css">
</head>
<body>

	<div class="flex">
		<main>
			<div class="slider">
				<!-- Swiper -->
			  <div class="swiper-container">
			   	<div class="swiper-wrapper">

						<!-- Slide 1 -->
			     	<div class="swiper-slide">
							<div class="flex">
								<div class="slider_image" style="background-image: url('https://picsum.photos/600/800/?gravity1');">
								</div> <!-- /slider_image -->
								<div>
									<h1>Lorem ipsum dolor sit amet.</h1>
									<p>Далеко-далеко за словесными горами в стране, гласных и согласных живут рыбные тексты. Жизни силуэт, даль гор которой назад которое диких, деревни текст?.</p>
								</div>
							</div> <!-- /flex -->
			     	</div> <!-- /swiper-slider -->

						<!-- Slide 2 -->
			     	<div class="swiper-slide">
							<div class="flex">
								<div class="slider_image" style="background-image: url('https://picsum.photos/600/800/?gravity2');">
								</div> <!-- /slider_image -->
								<div>
									<h1>Lorem ipsum dolor sit amet.</h1>
									<p>Далеко-далеко за словесными горами в стране, гласных и согласных живут рыбные тексты. Жизни силуэт, даль гор которой назад которое диких, деревни текст?.</p>
								</div>
							</div> <!-- /flex -->
			     	</div> <!-- /swiper-slider -->

				  </div> <!-- /swiper-wrapper -->
				</div> <!-- /swiper-container -->
			</div> <!-- /slider -->
		</main>
		<aside>
			Далеко-далеко за словесными горами в стране, гласных и согласных живут рыбные тексты. Буквенных, жизни выйти пунктуация? Города подпоясал знаках даже жизни, живет переулка деревни образ коварных, решила всеми, встретил до заманивший, необходимыми даль предупреждал жаренные. Раз над грустный толку, единственное решила страна его запятых выйти но маленькая текст она последний свой курсивных обеспечивает всемогущая необходимыми, на берегу даль лучше диких рыбного своего вершину прямо! Инициал своих прямо, за запятой до. Семантика образ лучше великий снова речью, переписывается текст, взгляд подпоясал, что залетают инициал вопрос страна?
		</aside>
	</div>


	<!-- Swiper JS -->
  <script src="https://cdnjs.cloudflare.com/ajax/libs/Swiper/4.4.2/js/swiper.min.js"></script>

  <!-- Initialize Swiper -->
  <script>
    var swiper = new Swiper('.swiper-container', {
    });
  </script>
</body>
</html>


style.css
html, body {padding: 0; margin: 0;}
.flex {	display: flex; }
main {	width: 100%; }
aside {	width: 350px;	background-color: #5f9; }

.swiper-wrapper {	width: 1px; }

.slider {	background-color: #eee;	padding: 10px; }

.slider_image {
	margin-right: 20px;
	flex-shrink: 0;
	width: 40%;
	min-height: 280px;
	background: no-repeat center center;
	background-size: cover; }

.slider h1 { font-size: 23px; }
.slider p {	font-size: 18px; }
  • Вопрос задан
  • 1323 просмотра
Решения вопроса 1
Tolly
@Tolly Автор вопроса
main {
    flex: 0 0 auto;
    overflow: hidden;
}

aside {
    flex: 1 1 600px;
    background-color: #5f9;
}
Ответ написан
Комментировать
Пригласить эксперта
Ответы на вопрос 1
AngReload
@AngReload
Кратко о себе
Это свойство в любом случае перебивается width: 100% из подключенного swiper.min.css
Что с ним, что без - никакой разницы не вижу, присутствует горизонтальная прокрутка. Оно просто не работает.
Ответ написан
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы