I have a simple flex container with children each consisting of an image and a heading. The images have an explicit height set, which results in an implicit width based on their aspect ratio. Below the image, there is a heading.
What I try to achieve is that the headings can never get wider than the intrinsic width of the image above it. I was so far not able to find a solution. The one that comes closest is using width: min-content on the heading, but then the heading is not taking up all available space that the image width offers.
I made a small CodePen that hopefully illustrates the problem. There, I highlighted the areas in red that are a result of the width of the heading.
