CODEWITHSUNDEEP
htmlcssimageheightlimit
Tamás Piros
Tamás Piros

Reputation: 1

How to limit the dynamic height of a flex-grow container with an image that stretches inside a CSS grid layout?

The problem is that .bottom contains an image within a CSS grid. The image grows to fill the grid column and stretches .bottom beyond its intended height. This behavior occurs even though I've tried setting max-height: 100% on the image and its container.

<div class="column1">
   <div class="texts">
      <div class="title">
         <p>Title</p>
      </div>
      <div class="list-item">
         <p class="seq birthstone-bounce-regular">3.</p>
         <p>Dummy text</p>
      </div>
   </div>
   <div class="bottom">
      <img src="images/image3.jpg" alt="image3" class="process-image3" />
      <div class="recommendation">
         <p>
            recommendation
         </p>
      </div>
   </div>
</div>
</div>

.column1 {
display: flex;
flex-direction: column;
font-size: 3rem;
width: 100%;

    .bottom {
      display: grid;
      grid-template-columns: 2fr 1fr;
      align-items: start;
      gap: 1rem;
      flex-grow: 1;
      width: 100%;
    
      .process-image3 {
        max-height: 100%;
        max-width: 100%;
        object-fit: contain; 
        height: auto;
        flex-grow: 1;
      }
    }
}

When I comment out the .bottom container it takes up only the remaining available space within .column1. This shows that .bottom and .column1 are functioning correctly without the image.

Upvotes: 0

Views: 34

Answers (0)

Related Questions