Espace blanc : nowrap avec flex : 1 ; la largeur de l'enfant est trop petite pour accueillir du texte

Question

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.

Ils doivent être aussi petits que possible, toujours de la même taille, et ne pas renvoyer le texte à la deuxième ligne.

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>

Answer 1

Peut être fait en utilisant CSS Grid :

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