CSS horizontal scrolling not showing initial values

Question

I am making a sticky navbar which has circlular avatars, each with an alphabet A-Z, a total of 26 circles. When it is on full screen, it works fine. But when I switch to smaller screen view, the scroll doesnt let me traverse initial values.

As visible, the scroll doesnt scroll past 'J' to the left and thus I can't see values A-I

Here is the code.

let box = document.getElementById('box')
    let circles = ""

    for(let i=65;i<91;i++)
        circles+=`<a href=#><div class="circle" onclick="print('${String.fromCharCode(i)}')"><span class="inner">${String.fromCharCode(i)}</span></div></a>`
    box.innerHTML = circles

    function print(value) {
        console.log(value)
    }

        html{font-family: 'Comfortaa', cursive;}
        a{text-decoration: none;outline: none;}
        #box{
            padding: 20px;
            width: 100%;
            display: flex;
            flex-direction: row;
            align-items: center;
            justify-content: center;
            overflow-x: auto;
            position: sticky;
            position: -webkit-sticky;
            top: 0;
        }
        .circle{
            min-height: 50px;
            min-width: 50px;
            border-radius: 50px;
            background-color: #f9dbbd;
            margin-left: 20px;
            display: flex;
            align-items: center;
            justify-content: center;
        }
        .inner{
            color: #450920;
            font-weight: 700;
        }

<html>
<body>
    <div style="height: 1300px;background-color: red;"></div>
    <div id="box"></div>
    <div style="height: 1300px;background-color: red;"></div>
    <div style="height: 1300px;background-color: green;"></div>
</body>

</html>

Thanks for your time!

Please use the embedded code snippet tool, to help explain what this code does and does not yet do. And what you what you want it to do — Ahmad Shahbaz, Jun 16 '20 at 05:27

score 4 · Accepted Answer · answered Jun 16 '20 at 05:36

4

remove justify-content: center; from #box

answered Jun 16 '20 at 05:36

Karl L

1,645
1
7
11

works! Can you explain why this works after removing justify-content:center ?? – Lakshay Dutta Jun 16 '20 at 05:38
@LakshayDutta, it centers the children along the line, and makes this as the default/starting position, so in smaller view, that center part is somewhere around letter j or k – Karl L Jun 16 '20 at 05:43

score 1 · Answer 2 · answered Jun 16 '20 at 05:38

I have removed 2 rows in the style of box:

#box{
    padding: 20px;
    /* width: 100%; */ this one
    display: flex;
    flex-direction: row;
    align-items: center;
    /* justify-content: center; */ this one
    overflow-x: auto;
    position: sticky;
    position: -webkit-sticky;
    top: 0;
}

It works for me

score 1 · Answer 3 · answered Jun 16 '20 at 05:39

Remove your justify-content: center. Also add an box-sizing property so you can fully scroll:

html {
   box-sizing: border-box;
}

Its very common to remove the default padding and margin from the browser and adding box-sizing overall:

Usually we put this at the top of the CSS:

* {
   padding: 0;
   margin: 0;
   box-sizing: border-box;
}

CSS horizontal scrolling not showing initial values

3 Answers3