First few children of centered flex parent not showing up on screen

Question

I am creating certain repeated UI elements, says select boxes. I am keeping them inside a parent which is flex and the content is centered. Now when the items are more I am getting the scroll and am able to see the last elements with scroll , but not the first few elements. I want the elements to appear from center and expand in both directions evenly.

<html>
<body>
    <div style="display: flex;justify-content: center; overflow-x: auto;">
        <select style="width: 400px; height: 100px; margin: 20px; flex-shrink:0">
              <option value="volvo">Volvo</option>
              <option value="saab">Saab</option>
              <option value="mercedes">Mercedes</option>
              <option value="audi">Audi</option>
        </select>
                <select style="width: 400px; height: 100px; margin: 20px; flex-shrink:0">
              <option value="volvo">Volvo</option>
              <option value="saab">Saab</option>
              <option value="mercedes">Mercedes</option>
              <option value="audi">Audi</option>
        </select>
                <select style="width: 400px; height: 100px; margin: 20px; flex-shrink:0">
              <option value="volvo">Volvo</option>
              <option value="saab">Saab</option>
              <option value="mercedes">Mercedes</option>
              <option value="audi">Audi</option>
        </select>
                <select style="width: 400px; height: 100px; margin: 20px; flex-shrink:0">
              <option value="volvo">Volvo</option>
              <option value="saab">Saab</option>
              <option value="mercedes">Mercedes</option>
              <option value="audi">Audi</option>
        </select>
                <select style="width: 400px; height: 100px; margin: 20px; flex-shrink:0">
              <option value="volvo">Volvo</option>
              <option value="saab">Saab</option>
              <option value="mercedes">Mercedes</option>
              <option value="audi">Audi</option>
        </select>
                <select style="width: 400px; height: 100px; margin: 20px; flex-shrink:0">
              <option value="volvo">Volvo</option>
              <option value="saab">Saab</option>
              <option value="mercedes">Mercedes</option>
              <option value="audi">Audi</option>
        </select>
                <select style="width: 400px; height: 100px; margin: 20px; flex-shrink:0">
              <option value="volvo">Volvo</option>
              <option value="saab">Saab</option>
              <option value="mercedes">Mercedes</option>
              <option value="audi">Audi</option>
        </select>
                <select style="width: 400px; height: 100px; margin: 20px; flex-shrink:0">
              <option value="volvo">Volvo</option>
              <option value="saab">Saab</option>
              <option value="mercedes">Mercedes</option>
              <option value="audi">Audi</option>
        </select>

                <select style="width: 400px; height: 100px; margin: 20px; flex-shrink:0">
              <option value="volvo">Volvo</option>
              <option value="saab">Saab</option>
              <option value="mercedes">Mercedes</option>
              <option value="audi">Audi</option>
        </select>               
        <select style="width: 400px; height: 100px; margin: 20px; flex-shrink:0">
              <option value="volvo">Volvo</option>
              <option value="saab">Saab</option>
              <option value="mercedes">Mercedes</option>
              <option value="audi">Audi</option>
        </select>
                <select style="width: 400px; height: 100px; margin: 20px; flex-shrink:0">
              <option value="volvo">Volvo</option>
              <option value="saab">Saab</option>
              <option value="mercedes">Mercedes</option>
              <option value="audi">Audi</option>
        </select>
                <select style="width: 400px; height: 100px; margin: 20px; flex-shrink:0">
              <option value="volvo">Volvo</option>
              <option value="saab">Saab</option>
              <option value="mercedes">Mercedes</option>
              <option value="audi">Audi</option>
        </select>
                <select style="width: 400px; height: 100px; margin: 20px; flex-shrink:0">
              <option value="volvo">Volvo</option>
              <option value="saab">Saab</option>
              <option value="mercedes">Mercedes</option>
              <option value="audi">Audi</option>
        </select>

    </div>
</body>
</html>

If you want your elements to appear in both direction evenly (so that scrollbar is centered) - then it should be done with JS... But you will have to get rid of other problems, like correct visible element centering etc. Try to solve your issue with some kind of slider (like https://kenwheeler.github.io/slick/) — Andrew Evt, Mar 12 '21 at 06:01

Yadab · Answer 1 · 2021-03-12T06:44:35.213

It is because of justify-content: center;. You really don't need that.

<html>
<body>
    <div style="display: flex; justify-content: center; overflow-x: auto;">
        <select style="width: 400px; height: 100px;  margin: 20px; flex-shrink:0; margin-left:auto">
              <option value="volvo">Volvo</option>
              <option value="saab">Saab</option>
              <option value="mercedes">Mercedes</option>
              <option value="audi">Audi</option>
        </select>
                <select style="width: 400px; height: 100px; margin: 20px; flex-shrink:0">
              <option value="volvo">Volvo</option>
              <option value="saab">Saab</option>
              <option value="mercedes">Mercedes</option>
              <option value="audi">Audi</option>
        </select>
                <select style="width: 400px; height: 100px; margin: 20px; flex-shrink:0">
              <option value="volvo">Volvo</option>
              <option value="saab">Saab</option>
              <option value="mercedes">Mercedes</option>
              <option value="audi">Audi</option>
        </select>
                <select style="width: 400px; height: 100px; margin: 20px; flex-shrink:0">
              <option value="volvo">Volvo</option>
              <option value="saab">Saab</option>
              <option value="mercedes">Mercedes</option>
              <option value="audi">Audi</option>
        </select>
                <select style="width: 400px; height: 100px; margin: 20px; flex-shrink:0">
              <option value="volvo">Volvo</option>
              <option value="saab">Saab</option>
              <option value="mercedes">Mercedes</option>
              <option value="audi">Audi</option>
        </select>
                <select style="width: 400px; height: 100px; margin: 20px; flex-shrink:0">
              <option value="volvo">Volvo</option>
              <option value="saab">Saab</option>
              <option value="mercedes">Mercedes</option>
              <option value="audi">Audi</option>
        </select>
                <select style="width: 400px; height: 100px; margin: 20px; flex-shrink:0">
              <option value="volvo">Volvo</option>
              <option value="saab">Saab</option>
              <option value="mercedes">Mercedes</option>
              <option value="audi">Audi</option>
        </select>
                <select style="width: 400px; height: 100px; margin: 20px; flex-shrink:0">
              <option value="volvo">Volvo</option>
              <option value="saab">Saab</option>
              <option value="mercedes">Mercedes</option>
              <option value="audi">Audi</option>
        </select>

                <select style="width: 400px; height: 100px; margin: 20px; flex-shrink:0">
              <option value="volvo">Volvo</option>
              <option value="saab">Saab</option>
              <option value="mercedes">Mercedes</option>
              <option value="audi">Audi</option>
        </select>               
        <select style="width: 400px; height: 100px; margin: 20px; flex-shrink:0">
              <option value="volvo">Volvo</option>
              <option value="saab">Saab</option>
              <option value="mercedes">Mercedes</option>
              <option value="audi">Audi</option>
        </select>
                <select style="width: 400px; height: 100px; margin: 20px; flex-shrink:0">
              <option value="volvo">Volvo</option>
              <option value="saab">Saab</option>
              <option value="mercedes">Mercedes</option>
              <option value="audi">Audi</option>
        </select>
                <select style="width: 400px; height: 100px; margin: 20px; flex-shrink:0">
              <option value="volvo">Volvo</option>
              <option value="saab">Saab</option>
              <option value="mercedes">Mercedes</option>
              <option value="audi">Audi</option>
        </select>
                <select style="width: 400px; height: 100px; margin: 20px; flex-shrink:0; margin-right: auto">
              <option value="volvo">Volvo</option>
              <option value="saab">Saab</option>
              <option value="mercedes">Mercedes</option>
              <option value="audi">Audi</option>
        </select>

    </div>
</body>
</html>

I need it because the number of select boxes coming inside the div will be dynamic. I need to show them in centre. — user9040429, Mar 12 '21 at 05:59
Check this out. This might be the answer for you https://stackoverflow.com/questions/34184535/change-justify-content-value-when-flex-items-overflow-container — Yadab, Mar 12 '21 at 06:10
yep the link helped. Giving margin-left: auto to first box and margin-right: auto to last box. Thanks a lot — user9040429, Mar 12 '21 at 06:28

First few children of centered flex parent not showing up on screen

1 Answers1