Запобігайте розтягуванню предметів гнучкості

Зразок:

div {
  display: flex;
  height: 200px;
  background: tan;
}
span {
  background: red;
}

<div>
  <span>This is some text.</span>
</div>

У мене є два запитання:

1. Чому це відбувається в основному з span?
2. Який правильний підхід, щоб запобігти його розтягуванню, не впливаючи на інші елементи гнучкості в контейнері?

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

Щоб вплинути на всі гнучкі елементи контейнера, виберіть це:
Ви повинні встановитиalign-items: flex-start;значення,divі всі гнучкі елементи цього контейнера отримують висоту їх вмісту.

div {
  align-items: flex-start;
  background: tan;
  display: flex;
  height: 200px;
}
span {
  background: red;
}

<div>
  <span>This is some text.</span>
</div>

Щоб вплинути лише на один гнучкий елемент, виберіть це:
Якщо ви хочете розтягнути один гнучкий елемент на контейнері, вам потрібно встановитиalign-self: flex-start;цей гнучкий елемент. На всі інші гнучкі елементи контейнера це не впливає.

div {
  display: flex;
  height: 200px;
  background: tan;
}
span.only {
  background: red;
  align-self:flex-start;
}
span {
    background:green;
}

<div>
  <span class="only">This is some text.</span>
  <span>This is more text.</span>
</div>

Чому це відбувається з span?
Значенням властивості за замовчуванням align-itemsє stretch. Це причина, по якій spanвисота заливки div.

Різниця між baselineі flex-start?
Якщо у вас є текст на гнучких елементах із різним розміром шрифту, ви можете використовувати базову лінію першого рядка, щоб розмістити гнучкий елемент вертикально. Елемент гнучкого шрифту з меншим розміром шрифту має деякий простір між контейнером і самим ним вгорі. За flex-startдопомогою гнучкого елемента буде встановлено верхню частину контейнера (без місця).

div {
  align-items: baseline;
  background: tan;
  display: flex;
  height: 200px;
}
span {
  background: red;
}
span.fontsize {
  font-size:2em;
}

<div>
  <span class="fontsize">This is some text.</span>
  <span>This is more text.</span>
</div>

Ви можете знайти більше інформації про різницю між baselineта flex-startтут:
Яка різниця між гнучким початком та базовим рівнем?