Image should shrink but not grow above it's natural size

I want an image to shrink but not grow above it's natural size. The solution given here is working fine:
https://stackoverflow.com/questions/3463664/make-an-image-width-100-of-parent-div-but-not-bigger-than-its-own-width
However when using it in a different context it's still growing above it's natural size.

<!-- begin snippet: js hide: false console: true babel: false -->

<!-- language: lang-css -->

section {
  display: flex;
}

figure {
  margin: 0;
  display: flex;
  flex-direction: column;
  flex: 1;
}

figure img {
  /* This image should shrink in a responsive way
            but not grow above it's natural size */
  max-width: 100%;
}

section p {
  flex: 1;
}

<!-- language: lang-html -->

<section>
  <figure>
    <h4>The headline</h4>
    <img src="images/the-img.jpg">
    <figcaption>
      The caption.
    </figcaption>
  </figure>

  <p>
    Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata
    sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum.
    Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
  </p>
</section>

<!-- end snippet -->

Is there a way to pretend growing by CSS? Achieving this by Javascript would be no problem.

Just wrap your image in a div and the max-width:100% will be based on that rather than the flex container.

<!-- begin snippet: js hide: false console: true babel: false -->

<!-- language: lang-css -->

section {
  display: flex;
}

figure {
  margin: 0;
  display: flex;
  flex-direction: column;
  flex: 1;
}

figure img {
  max-width: 100%;
}

section p {
  flex: 1;
}

<!-- language: lang-html -->

<section>
  <figure>
    <h4>The headline</h4>
    <div><!-- added this -->
      <img src="https://picsum.photos/id/237/300/300">
    </div><!-- added this -->
    <figcaption>
      The caption.
    </figcaption>
  </figure>
  <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata
    sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum.
    Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</p>
</section>

<!-- end snippet -->

You want an image to shrink but not grow above its natural size. you can achieve this by

Solution 1: using a combination of max-width and align-self properties.
just modify the css of img element as:

<pre>

figure img {
  width: auto;
  height: auto;
  max-width: 100%;
  align-self: flex-start; 
}

</pre>

In the figure img selector, we set the width and height properties to auto to maintain the aspect ratio of the image. The max-width property restricts the image from growing horizontally beyond its natural size. By setting align-self: flex-start, we align the image to the top of the container, allowing it to stretch vertically within the available space

Solution 2: the same can be achieved by setting an additional align-items property to flex-start, center or flex-end on the figure css. that will also prevent the stretching of inner img element beyond its natural width.

<pre>

figure {
    margin: 0;
    display: flex;
    flex-direction: column;
    flex: 1;
    align-items: flex-start;
}

</pre>

I fiddled a bit more and in the end got rid of the gap: Set flex-basis of the container at the right to 50% and allow it to grow.

        section {
            display: flex;
        }

        figure {
            margin: 0;
            display: flex;
            flex-direction: column;
            flex-basis: auto;
            flex-grow: 0;
            flex-shrink: 1;
        }

        figure img {
            /* This image should shrink in a responsive way
            but not grow above it's natural size */
            max-width: 100%;
        }

        section p {
            flex-basis: 50%;
            flex-grow: 1;
            flex-shrink: 0;
        }

HTML as posted by @Adam