I want to put show the uploaded images in a div, they should maintain their width and height and spacing between them and should be horizontally scrollable if it overflows the div

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");
        const div = document.createElement("ul");
        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 div = document.createElement("div");
                div.innerHTML = `<img  src="${picFile.result}" title="${picFile.name}"/>`;
                output.appendChild(div);
            })
            picReader.readAsDataURL(files[i]);
        }
    } else {
        alert("Your browser does not support File API")
    }
})

#result {
    display: flex;
    margin-top: -60px;
    margin-left: 70px;
    height: 65px;
    background-color: yellow;
    width: 80%;
    overflow-x:auto;
    overflow-y:hidden;
}

.thumbnail {
    height: 60px;
    width: 60px;
    border-radius: 6px;
}

<div id="result"> </div>

current output

CodePudding user response：

#container {
    /* change the height of the parent, it will automatically change the height of images and buttons */
    --height: 15vw;
    /* 12px is the default height of scrollbar (at least in chrome), 
    but I added some pixel to make sure that it will be working also in Firefox etc... 
    you can change it manually here or...*/
    /* you can also change this value using javascript https://stackoverflow.com/questions/28360978/css-how-to-get-browser-scrollbar-width-for-hover-overflow-auto-nice-margi */
    /* we will use this css var inside line 35 CSS (#result .thumbnail) */
    --scrollBarHeight: 15px;
    border: 1px solid red;
    /* button (auto width) #result (all space) */
    display: grid;
    grid-template-columns: auto 1fr;
    /* gap between buttons and #result, change it if you want */
    gap: 1rem;
}

#container button {
    /* square button */
    height: var(--height);
    width: var(--height);
    /* font-size auto sized by the height of button */
    font-size: calc(var(--height) / 1.5)
}

#result {
    height: var(--height);
    /* displayed one near the other */
    display: flex;
    gap: 0.5rem;
    /* active a scrollbar */
    overflow-x: scroll;
}

#result .thumbnail {
    /* solving bug: "scrollbar on top the images" */
    height: calc(var(--height) - var(--scrollBarHeight));
    /* make image not stretch css */
    object-fit: cover;
}

<!-- this is a example -->
<div id="container">
  <!-- plus button -->
  <button> </button>

  <!-- parent where there is the images -->
  <div id="result">
    <!-- 1 --><img  src="https://picsum.photos/500" alt="">
    <!-- 2 --><img  src="https://picsum.photos/500" alt="">
    <!-- 3 --><img  src="https://picsum.photos/500" alt="">
    <!-- 4 --><img  src="https://picsum.photos/500" alt="">
    <!-- 5 --><img  src="https://picsum.photos/500" alt="">
    <!-- 6 --><img  src="https://picsum.photos/500" alt="">
    <!-- 7 --><img  src="https://picsum.photos/500" alt="">
    <!-- 8 --><img  src="https://picsum.photos/500" alt="">
    <!-- 9 --><img  src="https://picsum.photos/500" alt="">
    <!-- 10 --><img  src="https://picsum.photos/500" alt="">
  </div>
</div>

CodePudding user response：

Just add a gap property to the #result div. And add flex-shrink:0; to the .thumbnail.

#result {
    display: flex;
    margin-top: -60px;
    margin-left: 70px;
    height: 65px;
    background-color: yellow;
    width: 80%;
    gap:20px;
    overflow-x:auto;
    overflow-y:hidden;
}

.thumbnail {
    height: 60px;
    width: 60px;
    flex-shrink:0;
    border-radius: 6px;
}

The reason is that flexbox will by default shrink all of its children to wrap it in a single line. So no matter their size, it will only give them the size that will allow it to fit them on a single line.