@weranda

Почему вложенные flex элементы не учитывают размер родительского контейнера?

Приветствую.
Есть простой пример: https://codepen.io/weranda/pen/QWNBLge
<div class="wrap">
	<div class="item">1</div>
	<div class="item">2</div>
	<div class="item">3</div>
</div>

.wrap{
	display: flex;
	flex-basis: 60%;
}

.item{
	flex-basis: 33.333%;

}

По логике родительский контейнер должен занимать 60% ширина окна, а вложенные в него — 33,3% ширины родительского контейнера, но так не происходит. Вложенные контейнеры почему-то увеличивают ширину родительского контейнера.
Почему так происходит и как это можно исправить?
  • Вопрос задан
  • 46 просмотров
Решения вопроса 2
mmmaaak
@mmmaaak
используй width для .wrap, есть ощущение, что flex-basis работает на элементах, находящихся внутри флекс контейнера, а у тебя wrap не обернут никаким контейнером с display: flex;
Ответ написан
Lynn
@Lynn
nginx, js, css
Что бы работат flex-basis у родителя должен быть display: flex.

5f606e2b34039971008729.png

Если вы хотите просто ширину 60%, так её и задайте
.wrap {
  display: flex;
  width: 60%;
}
Ответ написан
Пригласить эксперта
Ваш ответ на вопрос

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

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