<p>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. </p> <p>Ia hendaklah sekecil mungkin, sentiasa saiz yang sama, dan jangan balut teks ke baris kedua. </p> <p> <pre class="brush:css;toolbar:false;">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; }</pre> <pre class="brush:html;toolbar:false;"><div> <div class="button button1">Teks Ringkas</div> <div class="button button2">Butang Teks Panjang Yang Mempunyai Lebar Lebih Besar </div> </div></pre> </p>

.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>