CODEWITHSUNDEEP
htmlcss
aphelion
aphelion

Reputation: 13

Flexbox displays divs incorrectly rather than making the container scrollable

I was playing with flexbox and, when I attempted to make a scrollable list of days, I noticed that the first two days of the "week" are being "swallowed". The container is scrollable, but the beginning of the list doesn't display.

Basic code:

<div class="p-1 p-sm-3">
    <div class="d-flex justify-content-center text-center" style="overflow-x: auto;">
        <div class="px-4 py-5 mx-1 bg-white rounded">
            <h3>04</h3>
            <p>04/01/2020</p>
        </div>

        ...other days of the week here
    </div>
</div>

Full Fiddle: https://jsfiddle.net/98vf7xek/

Upvotes: 1

Views: 95

Answers (2)

Temani Afif
Temani Afif

Reputation: 273077

Use margin to center your elements instead of justify-content-center (applied to the first and last element)

<!doctype html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1">

        <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-giJF6kkoqNQ00vy+HMDP7azOuL0xtbfIcaT9wjKHr8RbDVddVHyTfAAsrekwKmP1" crossorigin="anonymous">

        <title>Hello, world!</title>
    </head>
    <body class="bg-secondary">
        <div class="p-1 p-sm-3">
            <div class="d-flex text-center" style="overflow-x: auto;">
                <div class="px-4 py-5 mx-1 bg-white rounded ms-auto"> <!-- HERE --->
                    <h3>04</h3>
                    <p>04/01/2020</p>
                </div>
                
                <div class="px-4 py-5 mx-1 bg-white rounded">
                    <h3>04</h3>
                    <p>04/01/2020</p>
                </div>
                
                <div class="px-4 py-5 mx-1 bg-white rounded">
                    <h3>04</h3>
                    <p>04/01/2020</p>
                </div>
                
                <div class="px-4 py-5 mx-1 bg-white rounded">
                    <h3>04</h3>
                    <p>04/01/2020</p>
                </div>
                
                <div class="px-4 py-5 mx-1 bg-white rounded">
                    <h3>04</h3>
                    <p>04/01/2020</p>
                </div>
                
                <div class="px-4 py-5 mx-1 bg-white rounded">
                    <h3>04</h3>
                    <p>04/01/2020</p>
                </div>
                
                <div class="px-4 py-5 mx-1 bg-white rounded me-auto"> <!-- HERE --->
                    <h3>04</h3>
                    <p>04/01/2020</p>
                </div>
            </div>
        </div>

        <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js" integrity="sha384-pQQkAEnwaBkjpqZ8RU1fF1AKtTcHJwFl3pblpTlHXybJjHpMYo79HY3hIi4NKxyj" crossorigin="anonymous"></script>
    </body>
</html>

Upvotes: 0

s.kuznetsov
s.kuznetsov

Reputation: 15213

Your problem is caused by rule justify-content: center!important, which is generated by class justify-content-center. Here:

<div class="d-flex justify-content-center text-center" style="overflow-x: auto;">
...
</div>

Just remove this class and your problem will be solved.

Upvotes: 1

Related Questions