div内上传预览图片被挤压无法横向滚动问题修复

出现图片挤压堆叠、无法横向滚动的核心原因：

1. Flex容器的直接子元素（动态生成的图片包裹div）默认开启flex-shrink: 1属性，总宽度超出容器时会自动收缩挤压，不会触发横向滚动逻辑
2. 没有给图片包裹层设置固定尺寸规则和间距，也没做图片适配，容易出现变形、堆叠问题
3. JS中声明的ul变量未被使用，属于冗余代码，不影响功能但可清理

直接替换对应代码即可：

修正后的CSS代码 #

#result {
    display: flex;
    /* 强制子元素不换行 */
    flex-wrap: nowrap;
    margin-top: -60px;
    margin-left: 70px;
    height: 65px;
    background-color: yellow;
    width: 80%;
    overflow-x: auto;
    overflow-y: hidden;
    /* 让图片垂直居中对齐 */
    align-items: center;
    /* 首尾图片不贴容器边缘 */
    padding: 0 8px;
    box-sizing: border-box;
}

/* 图片包裹容器规则 */
#result > div {
    /* 核心规则：不放大、不收缩，尺寸跟随内容，不会被挤压 */
    flex: 0 0 auto;
    /* 图片之间的间距 */
    margin-right: 10px;
}

.thumbnail {
    height: 60px;
    width: 60px;
    border-radius: 6px;
    /* 图片不变形，裁剪适配固定尺寸 */
    object-fit: cover;
    display: block;
}

修正后的JS代码（清理冗余） #

document.querySelector("#files").addEventListener("change", (e) => {
    if (window.File && window.FileReader && window.FileList && window.Blob) {
        const files = e.target.files;
        const output = document.querySelector("#result");
        for(let i = 0; i < files.length; i++){
            if (!files[i].type.match("image")) continue;
            const picReader = new FileReader();
            picReader.addEventListener("load", function(event) {
                const picFile = event.target;
                const imgWrapper = document.createElement("div");
                imgWrapper.innerHTML = `<img class="thumbnail" src="${picFile.result}" title="${picFile.name}"/>`;
                output.appendChild(imgWrapper);
            })
            picReader.readAsDataURL(files[i]);
        }
    } else {
        alert("Your browser does not support File API")
    }
})

原有HTML代码无需修改，修复后所有图片严格保持60*60尺寸，图片间保留固定间距，总宽度超出容器时自动支持横向滚动查看，图片不会出现拉伸变形。

内容的提问来源于stack exchange，提问作者Emmanuel