Tea Cosy Project - Overflowing items - Flexbox

Hi All,

I have played around with this code quite a lot but seem to be struggling to get the items to not overspill the parent container, into the next container below, when going to a smaller screen size. The items are not shrinking as the page size adjusts. The struggle is part of the journey but for some reason I’ve hit a real mental block on this haha. Any advice would be really useful :slight_smile:

Codecademy Project link: https://www.codecademy.com/journeys/front-end-engineer/paths/fecj-22-improved-styling-with-css/tracks/fecj-22-making-a-website-responsive/modules/wdcp-22-layout-with-flexbox-c6c85b4d-0af4-463c-a524-60d812a4b011/projects/tea-cozy

HTML

          <div class="steeping">
            <div class="steeping-child">
                <img src="Resources/Images/img-berryblitz.jpg" alt="Fall Berry Blitz Tea" width="300px" height="200px" >
                <h4 class="image-text">Fall Berry Blitz Tea</h4>
             </div>
             <div class="steeping-child">
                <img src="Resources/Images/img-spiced-rum.jpg" alt="Spiced Rum Tea" width="300px" height="200px">
                <h4 class="image-text">Spiced Rum Tea</h4>
             </div>
              <div class="steeping-child">
                <img src="Resources/Images/img-donut.jpg" alt="donut" width="300px" height="200px">
                <h4 class="image-text">Seasonal Donut</h4>
              </div>
              <div class="steeping-child">
                <img src="Resources/Images/img-myrtle-ave.jpg" alt="Myrtle" width="300px" height="200px">
                <h4 class="image-text">Myrtle Ave Tea</h4>
              </div>
              <div class="steeping-child">
                <img src="Resources/Images/img-bedford-bizarre.jpg" alt="Bedford Bizarre" width="300px" height="200px">
                <h4 class="image-text">Bedford Bizarre Tea</h4>
              </div>
          </div>```

.steeping{
display: flex;
height: 700px;
justify-content: space-between;
flex-direction: column;
align-items:center;
flex-wrap: wrap;
min-width: 0;
border: 2px solid red;
}

.steeping-child{
max-height: 200px;
flex: 0 1 300px;
min-width: 0;

}

.steeping-child h4{
flex-shrink: 1;
}

Hi all, this problem has now been solved.

Happy Coding! :slight_smile: