CSS flex element not shrinking when text wrapped [duplicate]

I have a flex container with an h2 and a link. At certain screen sizes, the text within the h2 wraps - which is fine. However, when the text wraps, the h2 still uses as much space as possible. You can see this in the example below - there's lots of extra blue space.

What I would like is for the h2 to only be as wide as necessary to contain the text, and for the text to wrap only when there's not enough room for it to be on one line.

What I've tried:

• Setting the width of the h2 to fit-content and min-content. min-contentkind of does what I want, but it causes word wrapping at all sizes
• Setting: flex-basis:auto; flex-grow:0, flex-shrink:1 - no change
• Setting display:inline-block on the h2 - no change.
• Changing the h2 to a span. This works, but then I don't have a heading. This leads me to think the problem lies in the fact the h2 is a block element - but nothing I've tried has any effect.

.container{  display:flex;  align-items:center;  background:green;  gap:2;  width:200px; /* Only set to mimic a constrained container width */  flex-grow:0;  flex-shrink:1;  flex-basis:auto;}h2{  background:blue;}a{  background:red;}

<div class="container"><h2>Featured Publications</h2><a href="#">To Top</a></div>