So erstellen Sie mit Flexbox eine Spanne basierend auf der Breite des Inhalts

Question

Ich habe span und div in einem übergeordneten Flex-Row-Element mit fester Breite verwendet

.parent {
  Anzeige: Flex;
  Flexrichtung: Reihe;
  Breite: 230px;
  Hintergrundfarbe: blau;
}

.child1 {
  Hintergrundfarbe: rot;
}

.child2 {
  Mindestbreite: 40 Pixel;
}

<div class="parent">
    <span class="child1">Dies ist ein Text in span</span>
    <div class="child2"/>
</div>

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

Answer 1

也许你可以将parent设置为网格并使用fr单位进行测量？

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

这将使文本容器的宽度与文本的确切宽度相同，并使剩余的容器占据剩余空间的1份（没有其他容器会占据100%的空间）。

对于行显示，只需将columns更改为rows。