So erstellen Sie mit Flexbox eine Spanne basierend auf der Breite des Inhalts
<p>Ich habe span und div in einem übergeordneten Flex-Row-Element mit fester Breite verwendet</p>
<p><br /></p>
<pre class="brush:css;toolbar:false;">.parent {
Anzeige: Flex;
Flexrichtung: Reihe;
Breite: 230px;
Hintergrundfarbe: blau;
}
.child1 {
Hintergrundfarbe: rot;
}
.child2 {
Mindestbreite: 40 Pixel;
}</pre>
<pre class="brush:html;toolbar:false;"><div class="parent">
<span class="child1">Dies ist ein Text in span</span>
<div class="child2"/>
</div></pre>
<p><br /></p>
<p>Ich möchte, dass der Span immer die gleiche Breite wie der Text hat und das Div die gesamte verbleibende Breite des übergeordneten Elements einnimmt. Wenn nun der Text in eine neue Zeile verschoben wird (wie Sie im Codeausschnitt sehen können), ist der rote Hintergrundbereich breiter als der Text. Wie kann dieser Code behoben werden? Ich brauche, dass der rote Hintergrund genau am Rand des Textes endet</p>