Cegah barang lentur agar tidak meregang

Sampel:

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

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

Saya punya dua pertanyaan, silakan:

1. Mengapa pada dasarnya hal itu terjadi pada span?
2. Apa pendekatan yang tepat untuk mencegahnya meregang tanpa memengaruhi item flex lainnya dalam wadah flex?

Anda tidak ingin meregangkan rentang ketinggian?
Anda memiliki kemungkinan untuk memengaruhi satu atau beberapa item-fleksibel agar tidak meregangkan seluruh tinggi penampung.

Untuk mempengaruhi semua item-flex dari penampung, pilih ini:
Anda harus menyetelalign-items: flex-start;kedivdan semua item-flex dari penampung ini mendapatkan ketinggian dari isinya.

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

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

Untuk memengaruhi hanya satu item-flex, pilih ini:
Jika Anda ingin melepaskan satu item-fleksibel pada penampung, Anda harus menyetelalign-self: flex-start;ke item-fleksibel ini. Semua item fleksibel lain dari penampung tidak terpengaruh.

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>

Mengapa ini terjadi pada span?
Nilai default dari properti align-itemsadalah stretch. Inilah alasan mengapa spanmengisi ketinggian div.

Perbedaan antara baselinedan flex-start?
Jika Anda memiliki beberapa teks pada item-flex, dengan ukuran font yang berbeda, Anda dapat menggunakan garis dasar baris pertama untuk menempatkan item-fleksibel secara vertikal. Item fleksibel dengan ukuran font yang lebih kecil memiliki beberapa ruang antara penampung dan dirinya sendiri di bagian atas. Dengan flex-startflex-item akan diatur ke atas wadah (tanpa spasi).

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>

Anda dapat menemukan informasi lebih lanjut tentang perbedaan antara baselinedan di flex-startsini:
Apa perbedaan antara flex-start dan baseline?