Ngăn không cho các mặt hàng uốn cong bị kéo giãn

Mẫu vật:

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

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

Tôi có hai câu hỏi, vui lòng:

1. Tại sao nó về cơ bản xảy ra với span?
2. Cách tiếp cận phù hợp để ngăn nó kéo giãn mà không ảnh hưởng đến các vật phẩm uốn dẻo khác trong thùng chứa linh hoạt là gì?

Bạn không muốn kéo dài nhịp theo chiều cao?
Bạn có khả năng tác động đến một hoặc nhiều mục linh hoạt để không kéo dài hết chiều cao của thùng chứa.

Để ảnh hưởng đến tất cả các mục linh hoạt của vùng chứa, hãy chọn tùy chọn này:
Bạn phải đặtalign-items: flex-start;thànhdivvà tất cả các mục linh hoạt của vùng chứa này có chiều cao của nội dung của chúng.

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

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

Để chỉ ảnh hưởng đến một mục linh hoạt duy nhất, hãy chọn mục này:
Nếu bạn muốn tháo một mục linh hoạt duy nhất trên thùng chứa, bạn phải đặtalign-self: flex-start;thành mục linh hoạt này. Tất cả các mục linh hoạt khác của thùng chứa không bị ảnh hưởng.

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>

Tại sao điều này xảy ra với span?
Giá trị mặc định của thuộc tính align-itemslà stretch. Đây là lý do tại sao spanđiền vào chiều cao của div.

Sự khác biệt giữa baselinevà flex-start?
Nếu bạn có một số văn bản trên các mục flex, với các kích thước phông chữ khác nhau, bạn có thể sử dụng đường cơ sở của dòng đầu tiên để đặt mục flex theo chiều dọc. Một mục linh hoạt có kích thước phông chữ nhỏ hơn có một số khoảng trống giữa vùng chứa và chính nó ở trên cùng. Với flex-startflex-item sẽ được đặt ở trên cùng của vùng chứa (không có khoảng trống).

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>

Bạn có thể tìm thêm thông tin về sự khác biệt giữa baselinevà flex-starttại đây:
Sự khác biệt giữa flex-start và baseline là gì?