@afanasiyz
Javascript-разработчик

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

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

Как это исправить - примерно понятно, интересно, за счет чего это происходит.
  • Вопрос задан
  • 3368 просмотров
Решения вопроса 1
ShadowOfCasper
@ShadowOfCasper
Middle User Interface Web Developer
Настройка flex-wrap тут не при чём. У тебя flex в колонку. Соответственно за растягивание в ширину отвечает свойство align-items, которое по дефолту stretch. Если текст не нужно растягивать по ширине родителя, который наследуется от самой широкой дочки, то переопредели align-items на flex-start
Если тебе непонятно почему происходит так:
1) Ширина родителя наследуется с самой широкой дочки, либо от ширины экрана в случае с блоком/флексом
2) Обе дочки наследуют ширину от родителя при flex-direction: column и при оставлении по умолчанию align-items.
Ответ написан
Комментировать
Пригласить эксперта
Ответы на вопрос 1
Fragster
@Fragster
помогло? отметь решением!
Он растягивается на ширину своего парента, который растянут сиблингом. Задайте у big max-width: 100%;
Ответ написан
Ваш ответ на вопрос

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

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