Почему элемент flex-контйнера не выходит за его пределы?

Question

[Drovosek01]

Есть пример верстки с wp-kama: https://jsfiddle.net/kamaev/57br2agm/

Если, например, когда у всех элементов свойство flex-basis стоит auto, задать первому элементу .itm1 ширину 200% или 20000px, то он растягивается на максимально свободное пространство в контейнере, но не более. Почему так?

Answer 1

[xversus]

При flex-basis: auto ширина элементов высчитывается через width или, если width не указан, по ширине контента. Первый элемент не может занять всю строку, потому что flex-wrap по умолчанию nowrap, а место для остальных элементов тоже должно остаться.
Подробнее можете почитать здесь: https://medium.com/@stasonmars/%D1%80%D0%B0%D0%B7%...

Comments

[Drovosek01]

Я имел ввиду не свойство flex-basis, а ширину width. Если для .itm1 задать width: 20000px; и убрать у него свойство flex-basis, то ширина не будет такой, какая она задана в css. Я не понимаю почему так.

.itm1 {
  width: 20000px;
}

[xversus]

Вы можете проставить хоть 1000000px, элемент все равно не будет такой ширины, потому что он ограничен шириной контейнера. А контейнер - это не блочный элемент (display: block), а флексовый, он по главной оси не растягивается.
Убрать flex-basis у элемента = поставить flex-basis: auto.
А при flex-basis: auto ширина берется по width. Если width не указан, то по контенту.
Но ширина каждого отдельно взятого элемента - предварительная, окончательно будет высчитана, когда этот элемент уложится в контейнер со всеми остальными.
У них же тоже flex-basis: auto, только ширина, в отличие от .itm1, не указана. Поэтому для них ширина высчитывается так, чтобы вместилось их содержимое, а для .itm1 берется ширина, максимально близкая к указанной вами, чтобы оставить нужное место для других элементов.
Такие вот пироги.

[Drovosek01]

xversus, а как мне растянуть его на ширину большую длине контейнера, при это не заполняя содержимым (то есть не добавляя ничего внутрь элемента, управляя только css)?

[xversus]

Как вариант - проставить min-width: 20000px вместо width, хотя трудно представить, зачем вам может понадобиться то, что получится в итоге.

[Drovosek01]

xversus, спасибо.
На практике, конечно, это мало где применимо, просто хотелось узнать можно ли это сделать стандартными средствами без перелопачивания верстки :\

[Drovosek01]

xversus, получается когда мы блоку задаем в css свойство width с каким-то значением, то блок не обязан соблюдать это правило? Зачем тогда нужно это свойство?

[xversus]

Drovosek01, блоковые контейнеры обязаны - они и растягиваются в зависимости от контента. Во флексбоксе все сложнее, т.к. кроме ширины отдельного элемента внутри надо еще учитывать много всего, включая ширину и высоту самого контейнера и других элементов внутри, возможность переноса не вмещающихся элементов на другую строку и т.д. Поэтому у элемента будет нужная вам ширина только если позволяют условия.
Например, в вашем случае:
- первому элементу задана ширина, заведомо слишком большая для контейнера
- растягивать контейнер по главной оси нельзя
- перенести на другую строку нельзя (flex-wrap: nowrap по умолчанию)
- а у остальных элементов тоже есть контент и паддинги, которые тоже надо учитывать, хотя бы по минимуму
Поэтому в итоге в контейнере элементы умещаются так, как будет оптимальнее, "чтобы всем было хорошо".