Verhindern Sie, dass sich flexible Gegenstände dehnen

Stichprobe:

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

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

Ich habe zwei Fragen, bitte:

1. Warum passiert es im Grunde dem span?
2. Was ist der richtige Ansatz, um zu verhindern, dass es sich dehnt, ohne andere Flex-Elemente in einem Flex-Container zu beeinträchtigen?

Sie möchten die Spannweite nicht in der Höhe dehnen?
Sie haben die Möglichkeit, einen oder mehrere Flex-Artikel so zu beeinflussen, dass sie nicht die gesamte Höhe des Containers ausdehnen.

Um alle Flex-Elemente des Containers zu beeinflussen, wählen
Sie Folgendes: Sie müssen festlegenalign-items: flex-start;, dassdivalle Flex-Elemente dieses Containers die Höhe ihres Inhalts erhalten.

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

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

Um nur ein einzelnes Flex-Element zu beeinflussen, wählen
Sie Folgendes : Wenn Sie ein einzelnes Flex-Element auf dem Container entfernen möchten, müssen Siealign-self: flex-start;dieses Flex-Elementfestlegen. Alle anderen Flex-Elemente des Containers sind nicht betroffen.

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>

Warum passiert das mit dem span?
Der Standardwert der Eigenschaft align-itemsist stretch. Dies ist der Grund, warum spandie Höhe der füllen div.

Unterschied zwischen baselineund flex-start?
Wenn Sie Text auf den Flex-Elementen mit unterschiedlichen Schriftgrößen haben, können Sie die Grundlinie der ersten Zeile verwenden, um das Flex-Element vertikal zu platzieren. Ein Flex-Element mit einer kleineren Schriftgröße hat oben etwas Platz zwischen dem Container und sich selbst. Mit flex-startdem Flex-Item wird auf die Oberseite des Containers gesetzt (ohne Platz).

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>

Weitere Informationen zum Unterschied zwischen baselineund finden Sie flex-starthier:
Was ist der Unterschied zwischen Flex-Start und Baseline?