My elements include the following:
.nav {
width: 100%;
background: red;
display: flex;
}
.parent {
background: blue;
flex-grow: 1
}
.child {
background: yellow;
}<div class="nav.">
<div class="parent">
<div class="child">
Logo
</div>
</div>
</div>I am striving for the Logo to be tinted in Yellow while still displaying the parent's color, which is blue.
This essentially implies that I do not want the .child element to take on the full width of its parent, but rather to adapt its own width based on its content.
By adapting to its content, I mean avoiding assigning it a fixed width like 100px or 200px; instead, I prefer it to have a flexible width.
How can this CSS layout goal be achieved?