Scroll Width property different with images and div

user_17737100 0
Viewed 30
<!DOCTYPE html>
<html>

<head>
    <title>Document</title>
    <style>
        .container {
            margin: auto;
            margin-top: 4rem;
            overflow-x: hidden;
            width: 90%;
        }

        .slider {
            display: flex;
            column-gap: 1rem;
        }

        img {
            min-width: 13rem;
        }
    </style>
</head>

<body>
    <div class="container">
        <div class="slider">
            <div>
                <img src="baby_shower_2.jpg" alt="images" >
            </div>
            <div>
                <img src="baby_shower_2.jpg" alt="images" >
            </div>
            <div>
                <img src="baby_shower_2.jpg" alt="images" >
            </div>
            <div>
                <img src="baby_shower_2.jpg" alt="images" >
            </div>
            <div>
                <img src="baby_shower_2.jpg" alt="images" >
            </div>
            <div>
                <img src="baby_shower_2.jpg" alt="images" >
            </div>
            <div>
                <img src="baby_shower_2.jpg" alt="images" >
            </div>
            <div>
                <img src="baby_shower_2.jpg" alt="images" >
            </div>
            <div>
                <img src="baby_shower_2.jpg" alt="images" >
            </div>
            <div>
                <img src="baby_shower_2.jpg" alt="images" >
            </div>
            <!-- <img src="baby_shower_2.jpg" alt="images" >
            <img src="baby_shower_2.jpg" alt="images" >
            <img src="baby_shower_2.jpg" alt="images" >
            <img src="baby_shower_2.jpg" alt="images" >
            <img src="baby_shower_2.jpg" alt="images" >
            <img src="baby_shower_2.jpg" alt="images" >
            <img src="baby_shower_2.jpg" alt="images" >
            <img src="baby_shower_2.jpg" alt="images" >
            <img src="baby_shower_2.jpg" alt="images" >
            <img src="baby_shower_2.jpg" alt="images" > -->

        </div>
    </div>
    <script language="javascript">
        const container = document.querySelector('.container')
        console.log(container.scrollWidth)
    </script>
</body>


</html>

Inside container i have slider in which we are using images tag only in the first case and images wrapped inside div in second case both are producing different result. The result of scroll Width when using images tag alone inside slider = 1215. The result of scroll Width when using images wrapped inside their individual div = 2224

Why the result is different when using the images tag alone when there is an overflow in both cases?

Result when images wrapped inside div is used

Thanks in advance!!!!

slider css html javascript
1 Answers

So from what I've been able to tell, it's a CSS FLEX issue. I did notice the container width changing based on whether the image was wrapped in a div, vrs not being wrapped. To test this, I removed the "Display: flex" from the equation and then everything was ok, meaning that wrapped in a div or not, the container width(and its contents) did not change.

So what I did was, I left everything the same, and simply added the following to your img CSS code to normalize the image sizing.

It went from this(which I got from above):

img {
   min-width: 13rem;
}

To this:

    img{
      min-width: 13rem;
      display:block;
      max-width: 100%;
      height:auto;
    }

It now fully functions. The container width does not change, because the contents inside the slider(the images) sizing does not change.

Hope this helps

user_8249040
Related