Предотвращение растягивания предметов

Пример: 

div {
  display: flex;
  height: 200px;
  background: tan;
}
span {
  background: red;
}
<div>
  <span>This is some text.</span>
</div>

Ответы

Ответ 1

Вы не хотите растягивать промежуток по высоте?
У вас есть возможность воздействовать на один или несколько элементов flex, чтобы не растягивать всю высоту контейнера.

Чтобы повлиять на все flex-элементы контейнера, выберите это:
Вы должны установить align-items: flex-start; div и все flex-элементы этого контейнера получают высоту своего содержимого.

div {
  align-items: flex-start;
  background: tan;
  display: flex;
  height: 200px;
}
span {
  background: red;
}
<div>
  <span>This is some text.</span>
</div>