Impedir que os itens flexíveis se estiquem

Amostra:

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

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

Eu tenho duas perguntas, por favor:

1. Por que isso basicamente acontece com o span?
2. Qual é a abordagem certa para evitar que ele estique sem afetar outros itens flex em um contêiner flexível?

Você não quer esticar a amplitude de altura?
Você tem a possibilidade de afetar um ou mais itens flexíveis para não esticar a altura total do contêiner.

Para afetar todos os flex-items do contêiner, escolha isto:
Você deve definiralign-items: flex-start;paradive todos os flex-items deste contêiner obter a altura de seu conteúdo.

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

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

Para afetar apenas um único flex-item, escolha o seguinte:
Se você deseja descomprimir um único flex-item no contêiner, você deve definiralign-self: flex-start;para este flex-item. Todos os outros flex-items do container não são afetados.

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>

Por que isso está acontecendo com o span?
O valor padrão da propriedade align-itemsé stretch. Esta é a razão pela qual o spanpreenchimento da altura do div.

Diferença entre baselinee flex-start?
Se você tiver algum texto nos flex-items, com diferentes tamanhos de fonte, você pode usar a linha de base da primeira linha para colocar o flex-item verticalmente. Um flex-item com um tamanho de fonte menor tem algum espaço entre o contêiner e ele mesmo no topo. Com flex-starto flex-item será colocado no topo do container (sem espaço).

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>

Você pode encontrar mais informações sobre a diferença entre baselinee flex-startaqui:
Qual é a diferença entre flex-start e baseline?