Images in a div get cramped up and not scrolling

Question

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 class="thumbnail" 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

score 1 · Answer 1 · answered Jun 25 '22 at 18:07

#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 class="thumbnail" src="https://picsum.photos/500" alt="">
    <!-- 2 --><img class="thumbnail" src="https://picsum.photos/500" alt="">
    <!-- 3 --><img class="thumbnail" src="https://picsum.photos/500" alt="">
    <!-- 4 --><img class="thumbnail" src="https://picsum.photos/500" alt="">
    <!-- 5 --><img class="thumbnail" src="https://picsum.photos/500" alt="">
    <!-- 6 --><img class="thumbnail" src="https://picsum.photos/500" alt="">
    <!-- 7 --><img class="thumbnail" src="https://picsum.photos/500" alt="">
    <!-- 8 --><img class="thumbnail" src="https://picsum.photos/500" alt="">
    <!-- 9 --><img class="thumbnail" src="https://picsum.photos/500" alt="">
    <!-- 10 --><img class="thumbnail" src="https://picsum.photos/500" alt="">
  </div>
</div>

Ismail Shaikh · Answer 2 · 2022-06-26T13:17:05.457

0

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

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.

const picFile = event.target;
const div = document.createElement("div");

div.className="thumbnail-container"
div.innerHTML = `<img class="thumbnail" src="${picFile.result}" title="${picFile.name}"/>`;
                output.appendChild(div);

#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;
    border-radius: 6px;
}
.thumbnail-container{
   flex-shrink:0;
}

edited Jun 26 '22 at 13:17

answered Jun 26 '22 at 02:43

Ismail Shaikh

482
4
13

thumbnail still shrinks and the scroll not working – Emmanuel Jun 26 '22 at 08:24
@kkk I think that's because the img tag with `thumbnail` is wrapped inside another div. so it's not a direct child of the `#result` div which is infact the flex container. so you can either make the thumbnail a direct child of result div or you can add a class to the wrapper div and then set `flex-stretch:0` to that div. – Ismail Shaikh Jun 26 '22 at 13:11
Yes you’re right Ismail, thank you so much – Emmanuel Jun 28 '22 at 18:52

Images in a div get cramped up and not scrolling

2 Answers2