フレックスアイテムが伸びないようにする

Question 1

サンプル：

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

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

スニペットを展開

2つの質問があります。

なぜそれは基本的に起こるのspanですか？
フレックスコンテナ内の他のフレックスアイテムに影響を与えずに伸びないようにするための正しいアプローチは何ですか？

Question 2

スパンの高さを伸ばしたくないですか？
コンテナの高さ全体に伸びないように、1つまたは複数のフレックスアイテムに影響を与える可能性があります。

コンテナのすべてのフレックスアイテムに影響を与えるには、次を選択します。
に設定align-items: flex-start;する必要がdivあり、このコンテナのすべてのフレックスアイテムはコンテンツの高さを取得します。

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

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

スニペットを展開

単一のフレックスアイテムのみに影響を与えるには、次を選択します。
コンテナ上の単一のフレックスアイテムをストレッチ解除する場合はalign-self: flex-start;、このフレックスアイテムに設定する必要があります。コンテナの他のすべてのフレックスアイテムは影響を受けません。

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>

スニペットを展開

なぜこれが起こっているのspanですか？
プロパティのデフォルト値align-itemsはstretchです。これが、spanの高さを塗りつぶす理由divです。

違いbaselineとflex-start？
フレックスアイテムにフォントサイズの異なるテキストがある場合は、最初の行のベースラインを使用してフレックスアイテムを垂直に配置できます。フォントサイズが小さいフレックスアイテムは、コンテナと上部のコンテナの間にいくらかのスペースがあります。flex-startフレックスを使用すると、アイテムはコンテナの上部に設定されます（スペースなし）。

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>

スニペットを展開

baselineとの違いについて詳しくは、flex-startこちらをご覧ください。
フレックススタートとベースラインの違いは何ですか？