Hi I have simple question with example. How can I achieve automatic shrinking image inside my flexbox when height is not enought for the image?

I have to do full screen app as in my example where image should fill as most place as it possible with image original aspect ration. When the space is not enought (Height is going to be smaller) Image should start shrinking IN HIS HEIGHT.

```html
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <link
      rel="stylesheet"
      href="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/css/bootstrap.min.css"
      integrity="sha384-TX8t27EcRE3e/ihU7zmQxVncDAy5uIKz4rEkgIXeMed4M0jlfIDPvg6uqKI2xXr2"
      crossorigin="anonymous"
    />

    <style>
      body,
      html {
        height: 100%;
      }

      .cust-container {
        border: 4px solid red;
        max-height: 800px;
        height: 100%;
        width: 100%;
      }

      .cust-container img {
        max-height: 100%;
        width: auto;
        max-width: 100%;
      }

      .img-container {
        border: 4px solid green;
      }

      .left {
        background-color: yellow;
      }
    </style>
    <title>Static Template</title>
  </head>
  <body>
    <div class="cust-container">
      <div class="d-flex h-100">
        <div class="w-50 left"></div>
        <div class="right d-flex flex-column">
          <div class="img-container flex-grow-1">
            <img
              src="https://www.google.com/logos/doodles/2020/lebanon-independence-day-2020-6753651837108623-2xa.gif"
              alt=""
            />
          </div>
          <button class="btn btn-success">
            hello
          </button>
        </div>
      </div>
    </div>
  </body>
</html>
```

My code:
<https://codesandbox.io/s/keen-tdd-952kv?file=/index.html>