Ruang putih: nowrap dengan flex: 1; lebar kanak-kanak terlalu kecil untuk memuatkan teks

Question

Saya tidak dapat mencari sebarang penyelesaian untuk mempunyai 2 div bersaiz sama muat teks dalam satu baris. Nampak seperti ruang kosong: selepas saya menetapkan parent width:fit-content, width tidak diambil kira sekarang.

Ia hendaklah sekecil mungkin, sentiasa saiz yang sama, dan jangan balut teks ke baris kedua.

div {
  paparan: flex;
  lebar: muat-kandungan;
}

.butang {
  padding: 10px 20px;
  lentur: 1;
  white-space: nowrap;
  lebar min: 130px;
  lebar: muat-kandungan;
}

.button1 {
  latar belakang: merah;
}

.butang2 {
  latar belakang: hijau;
}

<div>
  <div class="button button1">Teks Ringkas</div>
  <div class="button button2">Butang Teks Panjang Yang Mempunyai Lebar Lebih Besar </div>
</div>

Answer 1

Boleh dilakukan menggunakan Grid CSS:

.container {
  display: inline-grid;
  grid-template-columns: 1fr 1fr;
}

.button {
  padding: 10px 20px;
  white-space: nowrap;
  min-width: 130px;
  overflow: auto;
}

.button1 {
  background: red;
}

.button2 {
  background: green;
}

<div class="container">
  <div class="button button1">Short Text</div>
  <div class="button button2">A Long Text Button That Has Greater Width </div>
</div>