Básicamente, quiero cambiar el tamaño de mi imagen según el espacio disponible del contenedor. Tengo una descripción y una imagen, y la imagen debería cambiar de tamaño dependiendo de la cantidad de texto en la descripción y no solo empujarla hacia arriba como lo hace ahora. En este proyecto, estoy usando reaccionar.

Resultado predeterminado si la descripción es pequeña: Resultado no deseado si la descripción es grande: Resultado deseado si la descripción es grande:

Mi código actual:

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