Предотвращение растяжения гибких элементов

Образец:

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;этот гибкий элемент. Все остальные flex-элементы контейнера не затрагиваются.

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помощью flex-элемента будет установлен верх контейнера (без пробела).

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здесь: В
чем разница между гибким стартом и базовой линией?