<p>Je ne trouve aucune solution pour que 2 divs de taille égale tiennent le texte sur une seule ligne. Cela ressemble à un espace : après avoir défini la largeur du parent: fit-content, la largeur n'est plus prise en compte maintenant. </p> <p>Ils doivent être aussi petits que possible, toujours de la même taille, et ne pas renvoyer le texte à la deuxième ligne. </p> <p> <pre class="brush:css;toolbar:false;">div { affichage : flexible ; largeur : ajustement du contenu ; } .bouton { remplissage : 10px 20px ; flexion : 1 ; espace blanc : nowrap ; largeur minimale : 130 px ; largeur : ajustement du contenu ; } .bouton1 { fond : rouge ; } .bouton2 { fond : vert ; }</pré> <pre class="brush:html;toolbar:false;"><div> <div class="bouton bouton1">Texte court</div> <div class="button button2">Un bouton de texte long qui a une plus grande largeur </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>