Angular FlexLayout make image use the leftover space

We have got an Angular app with FlexLayout. The design is that the left 50% container contains "some stuff" and in the right 50% container we want to display an explainatory text at the bottom and above the text, we want to display an image. This is a stripped down version to explain the issue.

<div fxLayout="row" style="height: 100%; border: 1px solid green">
  <div fxFlex="50" style="border: 1px solid red"></div>
  <div fxFlex="50" style="border: 1px solid red; overflow: hidden; padding: 1rem" fxLayout="column" fxLayoutGap="1rem">
    <div fxFlex style="max-width: 100%; max-height: 100%; border: 1px solid blue">
      <img src="assets/images/demo.svg" />
    </div>
    <div>
      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. 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. 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.
    </div>
  </div>
</div>

If we remove the <img ... /> it will do exactly what it is supposed to do, but as soon as we add the img, the div around the image will be resized to fit its content, but we want the img to adapt to its container.

I also created a stackblitz example with editable text and show hide image button to play around.

Add position: relative to the container element and width: 100% to the image.

CodeSandbox

I'm trying to achieve this for the past hour, and seems like something is off with "Flex Layout" library. Hence, I'm sharing my way to achieve this without that library.

.parent {
  height: 100vh;
  display: flex;
  border: 5px solid black;
}

.child1 {
  width: 50%;
}

.child1--left {
  border: 4px solid lime;
}

.child1--right {
  display: flex;
  flex-direction: column;
  border: 4px solid red;
}

.child2__image {
  min-height: 0; /* IMPORTANT */
  border: 3px solid indigo;
}

.child2__image img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

<div class="parent">
  <div class="child1 child1--left"></div>
  <div class="child1 child1--right">
    <div class="child2__image">
      <img src="https://svgsilh.com/svg_v2/1801287.svg">
    </div>
    <div class="child2__text">Lorem ipsum dolor sit, amet consectetur adipisicing elit. Magnam voluptatum voluptate id veniam earum explicabo optio nulla saepe ipsum obcaecati consequatur, hic ratione quam fugit porro iusto quia, exercitationem, sapiente animi dolore neque voluptates culpa amet. Iste dolorum nulla delectus officiis libero, sunt illo consequuntur, nihil totam sit facilis obcaecati!</div>
  </div>
</div>

The end result matters more that the tool(s) you use to achieve a certain goal.

Feel free to leave your opinion.