flex布局的div实现横向超出滚动item被压缩了

代码为：

<div className={styles.list}>
    <div className={styles.item}>
        <img src=""/>
        <div>标题1</div>
    </div>
    <div>
        <img src=""/>
        <div>标题2</div>
    </div>
    <div>
        <img src=""/>
        <div>标题3</div>
    </div>
    <div>
        <img src=""/>
        <div>标题</div>
    </div>
<div>

设置样式为：

.list{
    display: flex;
    align-items: center;
    gap: 8px;
    overflow-x: auto;
    -ms-overflow-style: none; // IE 和 Edge 隐藏滚动条
    scrollbar-width: none; // Firefox 隐藏滚动条
    -webkit-overflow-scrolling: touch; // iOS 平滑滚动
    
    .item{
        width: 64px; // 父元素固定宽度
         img {
          width: 100%; // 相对于父容器计算 = 64px
          height: 104px;
          border-radius: 8px;
          margin-bottom: 4px;
        }
        .title {
          width: 100%; // 相对于父容器计算 = 64px
          font-size: 10px;
          line-height: 14px;
          color: #222;
          text-align: center;
        }
    }
}

但是出现了问题，有些item被压缩了

问题产生的原因是：当容器空间不足时，文字内容较少的，虽然设置的title是100%，但是实际渲染时会根据内容自适应，导致容器被压缩。

解决方案一：告诉浏览器不要压缩

flex-shrink: 1 - 允许项目在容器空间不足时收缩

flex-shrink: 0 - 不允许项目在容器空间不足时收缩

//...
    .item{
        // ...
         flex-shrink: 0;  // 防止被压缩（改动的点）
        // ...
    }
//...

解决方案二：

//...
    .item{
        // ...
         flex: none;  // 等同于 flex: 0 0 auto
        // ...
    }
//...

解决方案三：

//...
    .item{
        // ...
         flex: 0 0 64px;  // flex-grow: 0, flex-shrink: 0, flex-basis: 64px
        // ...
    }
//...

解决方案四：

//...
    .item{
        // ...
          min-width: 64px;  // 设置最小宽度，防止被压缩
        // ...
    }
//...