Q: Left image got cut off when using overflow: auto, even with flex-shrink: 0

[ReactJS]

I’m making a section that contains a div with 3 images. Instead of resizing the images on smaller devices, I want to use an overflow: auto so mobile users can swipe to see the images.

When I apply the display: flex & a flex-shrink: 0 – only the image on the left got cut off (shrunk).

How can we fix this?

Here’s the demo:
gif: left image got shrunk when resizing

Here’s my code:

      <section id='blog-box'>
              <div className='blog-box__images flex'>
                  <img
                      src='./blog-1.jpeg' 
                      className='blog-box__img'
                      alt="blog 1" 
                  />
                  <img 
                      src='./blog-2.jpeg' 
                      alt="blog 2" 
                      className='blog-box__img'
                  />
                  <img 
                      src='./blog-3.jpeg' 
                      className='blog-box__img'
                      alt="blog 3" 
                  />
              </div>
       </section>

CSS:

.flex {
   display: flex;
   justify-content: center;
   align-items: center;
}

#blog-box {
    background-color: var(--clr-white);
    padding: 2em 0;
    margin: 0 auto;
    width: 100%;
    height: 100%;
    min-height: 600px;
}

.blog-box__images {
    margin-top: 2em; 
    overflow: auto;
    height: 290px; /* To use transition: translateY */
    flex-shrink: 0;
}

.blog-box__img {
    width: 180px;
    height: 250px;
    object-fit: cover;
    margin: 0 1em;
    border-radius: 5%;
    transition: transform 0.5s;
}

.blog-box__img:hover {
    transform: translateY(-20px);
}

>Solution :

The image on the left got cut off because of justify-content: center. To avoid cutting of images use justify-content: flex-start. So final code looks like

#blog-box {
    ...
    display: flex;
    justify-content: center;
    align-items: center
}

.blog-box__images {
    margin-top: 2em; 
    overflow: auto;
    height: 290px; /* To use transition: translateY */
    display: flex;
    justify-content: flex-start;
}