Почему flex добавляет в высоту блока пустое пространство, если текст растягивается в ширину?

Question

[Афанасий Захаров]

Добрый день.
div с классом text почему то начинает растягиваться на ширину своего сиблинга, не парента при настройке flex-wrap: wrap.
И при этом div.text имеет такую высоту, как будто параграфы не растянуты на всю ширину, и образуется пустое пространство.
Вот пример:
https://codepen.io/JimiMorrison/pen/eYOKMvv

Как это исправить - примерно понятно, интересно, за счет чего это происходит.

Comments

[RAX7]

добавь

.container {
  align-items: flex-start;
}

Answer 1

[Никита Кит]

Настройка flex-wrap тут не при чём. У тебя flex в колонку. Соответственно за растягивание в ширину отвечает свойство align-items, которое по дефолту stretch. Если текст не нужно растягивать по ширине родителя, который наследуется от самой широкой дочки, то переопредели align-items на flex-start
Если тебе непонятно почему происходит так:
1) Ширина родителя наследуется с самой широкой дочки, либо от ширины экрана в случае с блоком/флексом
2) Обе дочки наследуют ширину от родителя при flex-direction: column и при оставлении по умолчанию align-items.

Answer 2

[Антон Антон]

Он растягивается на ширину своего парента, который растянут сиблингом. Задайте у big max-width: 100%;

Comments

[Афанасий Захаров]

Простите, но вы внимательно посмотрите на парента.
Он не растянут сиблингом, он 100%

[Антон Антон]

.container растянут блоком .big, а .text растягивается вслед за контейнером.

[Афанасий Захаров]

Антон Антон, посмотрите пожалуйста еще раз.
container имеет ширину страницы

[Антон Антон]

Афанасий Захаров, контейнер имеет ширину, растянутую содержимым (блоком .big). Такое поведение было всегда, растягивание в ширину при отсутствии возможности перенести (а в случае блочного элемента ему никак не перенестись). Это подтверждается тем, что если у .big указать max-width, все встает на место.

[Афанасий Захаров]

Антон Антон, а зачем тогда параметры overflow ? если все растягивается?
откройте пожалуйста codepen, и там девтулзы. в моем случае, с моим монитором - у .container ширина 1853px, у .big - 6500px.

у .container такая ширина, потому что я прямо указал - width: 100vw;

[Антон Антон]

Афанасий Захаров, console.log(document.getElementsByClassName('container')[0].scrollWidth) выводит 6500
вероятно девтулзы вам показывают clientWidth, а не ширину содержимого.