Evite que los artículos flexibles se estiren

Muestra:

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

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

Tengo dos preguntas, por favor:

1. ¿Por qué básicamente le pasa al span?
2. ¿Cuál es el enfoque correcto para evitar que se estire sin afectar a otros elementos flexibles en un contenedor flexible?

¿No quieres estirar el tramo en altura?
Tiene la posibilidad de afectar uno o más elementos flexibles para no estirar la altura completa del contenedor.

A afectar a todos los flex-artículos del contenedor, seleccione la siguiente:
usted tiene que fijaralign-items: flex-start;adivy todas flex-artículos de este contenedor obtener la altura de su contenido.

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

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

Para afectar solo a un solo elemento flexible, elija esto:
Si desea desenrollar un solo elemento flexible en el contenedor, debe estableceralign-self: flex-start;este elemento flexible. Todos los demás elementos flexibles del contenedor no se ven afectados.

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 qué le está pasando esto a la span?
El valor predeterminado de la propiedad align-itemses stretch. Esta es la razón por la que spanrellenar la altura del div.

Diferencia entre baseliney flex-start?
Si tiene algo de texto en los elementos flexibles, con diferentes tamaños de fuente, puede usar la línea de base de la primera línea para colocar el elemento flexible verticalmente. Un elemento flexible con un tamaño de fuente más pequeño tiene algo de espacio entre el contenedor y él mismo en la parte superior. Con flex-startel elemento flexible se colocará en la parte superior del contenedor (sin espacio).

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>

Puede encontrar más información sobre la diferencia entre baseliney flex-startaquí:
¿Cuál es la diferencia entre flex-start y baseline?