Comment utiliser flexbox pour créer une étendue basée sur la largeur du contenu

Question

J'ai utilisé span et div dans un élément parent à rangée flexible de largeur fixe

.parent {
  affichage : flexible ;
  direction flexible : rangée ;
  largeur : 230 px ;
  couleur de fond : bleu ;
}

.enfant1 {
  couleur de fond : rouge ;
}

.enfant2 {
  largeur minimale : 40 px ;
}</pré>
<pre class="brush:html;toolbar:false;"><div class="parent">
    <span class="child1">Ceci est du texte en span</span>
    <div class="enfant2"/>
</div>

Je veux que l'étendue ait toujours la même largeur que le texte et que le div occupe toute la largeur restante de l'élément parent. Désormais (comme vous pouvez le voir dans l'extrait de code), lorsque le texte passe sur une nouvelle ligne, la zone d'arrière-plan rouge est plus large que le texte. Comment corriger ce code ? J'ai besoin que le fond rouge se termine exactement au bord du texte

Answer 1

Peut-être pourriez-vous définir parent sur une grille et utiliser des unités fr pour les mesures ?

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

Cela donnera au conteneur de texte la même largeur que le texte et fera en sorte que les conteneurs restants occupent 1 part de l'espace restant (aucun autre conteneur n'occupera 100 % de l'espace).

Pour l'affichage des lignes, remplacez simplement les colonnes par des lignes.