Evitar que os artigos flex de alongamento

para afetar todos os flex-itens do recipiente, escolha este:
Você tem que definir align-items: flex-start; para div e todos os flex-itens deste recipiente obter a altura do 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 afectar apenas um único item flexível, Escolha Isto:
Se quiser desengatar um único item de flexão no recipiente, tem de colocar align-self: flex-start; neste item de flexão. Todos os outros flex-itens do recipiente 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>

Porque é que isto está a acontecer ao span?
O valor por omissão da propriedade align-items é stretch. Esta é a razão pela qual o span preenche a altura do div.

Diferença entre baseline e flex-start?
Se você tiver algum texto sobre os itens flex, com diferentes tamanhos de letra, você pode usar a linha de base da primeira linha para colocar o item flex verticalmente. Um flex-item com um tamanho de letra menor tem algum espaço entre o recipiente e ele mesmo no topo. Com flex-start o flex-item será colocado no topo do recipiente (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>