使用溢出时左图像被截断：自动，即使使用 flex-shrink：0 [重复]答案

【问题标题】：Left image got cut off when using overflow: auto, even with flex-shrink: 0 [duplicate]使用溢出时左图像被截断：自动，即使使用 flex-shrink：0 [重复]
【发布时间】：2022-01-24 12:39:58
【问题描述】：

我正在制作一个包含 3 张图像的 div 的部分。我不想在较小的设备上调整图像大小，而是使用overflow: auto，以便移动用户可以滑动查看图像。

当我应用 display: flex 和 flex-shrink: 0 时 - 只有左侧的图像被截断（缩小）。

我们如何解决这个问题？

演示如下： gif: left image got shrunk when resizing

这是我的代码：

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

【问题讨论】：

标签： html css reactjs flexbox

【解决方案1】：

因为justify-content: center，左边的图片被截掉了。为避免剪切图像，请使用justify-content: flex-start。所以最终的代码看起来像

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

【讨论】：