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

Question

[weranda]

Приветствую.
Есть простой пример: 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% ширины родительского контейнера, но так не происходит. Вложенные контейнеры почему-то увеличивают ширину родительского контейнера.
Почему так происходит и как это можно исправить?

Answer 1

[Pavel Shvedov]

используй width для .wrap, есть ощущение, что flex-basis работает на элементах, находящихся внутри флекс контейнера, а у тебя wrap не обернут никаким контейнером с display: flex;

Comments

[weranda]

Так .item же и находится внутри flex контейнера.

[Pavel Shvedov]

weranda, еще раз, у wrap нет контейнера с display: flex

Answer 2

[Lynn «Кофеман»]

Что бы работат flex-basis у родителя должен быть display: flex.



Если вы хотите просто ширину 60%, так её и задайте

.wrap {
  display: flex;
  width: 60%;
}

Answer 3

[Pashok Doom]

https://basicweb.ru/css/css_pr_flex-basis.php