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

Question

I want an image to shrink but not grow above it's natural size. The solution given here is working fine: 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.

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;
}

<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>

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

Answer 1

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

section {
  display: flex;
}

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

figure img {
  max-width: 100%;
}

section p {
  flex: 1;
}

<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>