Resize image inside of a container to make it smaller if there is more text

Question

So basically I want to resize my image depending on the available space of the container. I have a description and an image, and the image should resize depending on the amount of text in the description and not just push it upwards as it does for me now. In this project, I'm using react.

Default result if the description is small: Unwanted result if the description is large: Desired resault if the description is large:

My current code:

<div className={classes["main-post-container"]}>
      <img className={classes["main-image"]} src={test} alt="test" />
      <p className={classes["main-description"]}>
        Lorem ipsum dolor sit, amet consectetur adipisicing elit. Minus illo
        enim magnam neque fugit rem praesentium voluptate quod architecto aut
        non, id fugiat modi tempora hic sed amet, eligendi delectus. Lorem ipsum
        dolor sit, amet consectetur adipisicing elit. Temporibus obcaecati
        dolore mollitia animi praesentium laudantium sit cumque exercitationem.
        Lorem ipsum dolor sit amet consectetur adipisicing elit. Eos minima
        pariatur quae id et officiis repellat doloribus, beatae ducimus quaerat
        repellendus nesciunt aliquid dolorem recusandae vero officia! Pariatur,
        voluptatem fugiat. .
      </p>
    </div>

CSS:

.main-post-container {
  width: 70%;
  height: 80%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-around;
  padding: 3rem;
}
.main-image {
  max-height: 450px;
  max-width: 800px;
  object-fit: fill;
  flex-grow: 1;
}
.main-description {
  font-weight: 900;
  font-size: 1rem;
  flex-grow: 3;
}

Answer 1

Try this css class:

.main-image {
  max-height: 450px;
  max-width: 800px;
  object-fit: fill;
  flex-grow: 1;
  height: auto
}