html - Flexbox displays divs incorrectly rather than making the container scrollable

Question

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/

Answer 1

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.