Cara menggunakan flexbox untuk mencipta rentang berdasarkan lebar kandungan

Question

Saya telah menggunakan span dan div dalam elemen induk baris lentur lebar tetap

.parent {
  paparan: flex;
  flex-direction: baris;
  lebar: 230px;
  warna latar belakang: biru;
}

.anak1 {
  warna latar belakang: merah;
}

.kanak2 {
  lebar min: 40px;
}

<div class="parent">
    <span class="child1">Ini ialah beberapa teks dalam span</span>
    <div class="child2"/>
</div>

Saya mahu rentang sentiasa sama lebar dengan teks dan div untuk mengambil keseluruhan baki lebar elemen induk. Sekarang (seperti yang anda boleh lihat dalam coretan kod), apabila teks bergerak ke baris baharu, kawasan latar belakang merah lebih luas daripada teks. Bagaimana untuk membetulkan kod ini? Saya memerlukan latar belakang merah untuk tamat tepat di tepi teks

Answer 1

Mungkin anda boleh menetapkan parent kepada grid dan menggunakan unit fr untuk pengukuran?

grid-template-columns: fit-content, 1fr

Ini akan menjadikan bekas teks sama lebar dengan teks dan menjadikan bekas yang tinggal mengambil 1 bahagian daripada ruang yang tinggal (tiada bekas lain akan mengambil 100% ruang).

Untuk paparan baris, cuma tukar lajur kepada baris.