Astral Astrid: Flexbox-Element mit inline-block Eigenschaft?

Beitrag lesen

Hallo,

spiele mich gerade mit FLEXBOX und würde mich sehr freuen, wenn jemand eine Lösung für mein Problem hätte!

Ich habe zwei Elemente in einem Container mit display: flex; und flex-direction: column; Eigenschaft (Flexbox benötige ich, da ich die Reihenfolge der Elemente in weiterer Folge ändern will - soll hier nicht das Thema sein).

Nun möchte ich jedem dieser Elemente eine background-color verpassen, die allerdings nur und ausschließlich den tatsächlichen Inhalt des Elements umspannt (also eine klassische inline-block Sache). Nun scheinen flex Elemente aber als block Elemente ausgeführt zu sein, - auch display: inline-flex; bringt mich nicht weiter, da sich auch in diesem Fall der Hintergrund stets dem breiteren der beiden Elemente und damit immer noch der Breite des gesamten Container anpasst.

Wie schaffe ich es also, dass sich background-color nicht auf die gesamte Flexbox-Breite, sondern nur und ausschließlich auf die zu hinterlegende Element-Breite bezieht?

Danke für eure Stellungnahmen!

LG, AA.