Take a look at this snippet of html:
<div class="container>
<div class="header">
</div>
<div class="content">
</div>
<div class="footer">
</div>
</div>
I am aiming for the container to match the size of the content div. However, I want the widths of the header and footer elements to be limited by the container's size relative to the content.
display:inline-block on its own is not effective as the container adjusts its size based on the widest child.
Since the width of the content is unknown, specific width settings cannot be applied.
Refer to the image below to understand the desired outcome.
In simpler terms: the footer and header should follow the width of the container, while the size of the content determines the container's width.