Zapobiegaj rozciągnięciu elementów elastycznych

Próba:

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

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

Mam dwa pytania, proszę:

1. Dlaczego w zasadzie tak się dzieje span?
2. Jakie jest właściwe podejście, aby zapobiec jego rozciągnięciu bez wpływania na inne elementy elastyczne w pojemniku elastycznym?

Nie chcesz rozciągać przęsła na wysokość?
Masz możliwość wpłynięcia na jeden lub więcej elementów elastycznych, aby nie rozciągać całej wysokości pojemnika.

Aby wpłynąć na wszystkie elementy elastyczne w kontenerze, wybierz to:
Musisz ustawićalign-items: flex-start;nadivi wszystkie elementy elastyczne w tym kontenerze otrzymają wysokość swojej zawartości.

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

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

Aby wpłynąć tylko na jeden element elastyczny, wybierz to:
Jeśli chcesz rozciąć pojedynczy element elastyczny na pojemniku, musisz ustawićalign-self: flex-start;ten element elastyczny. Nie ma to wpływu na wszystkie inne elementy elastyczne kontenera.

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>

Dlaczego tak się dzieje span?
Wartość domyślna właściwości align-itemsto stretch. To jest powód, dla którego spanwypełnia wysokość div.

Różnica między baselinei flex-start?
Jeśli masz jakiś tekst na elementach elastycznych, z różnymi rozmiarami czcionek, możesz użyć linii bazowej pierwszego wiersza, aby umieścić element elastyczny w pionie. Element elastyczny z mniejszym rozmiarem czcionki ma pewną przestrzeń między kontenerem a sobą u góry. Z flex-startelastycznym elementem zostanie umieszczony na górze kontenera (bez spacji).

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>

Więcej informacji na temat różnicy między baselinei można znaleźć flex-starttutaj:
Jaka jest różnica między flex-start a baseline?