Cannot scroll on the left an centered img with flex

Question

I've read a lot of articles describing how to center a img bigger than the div container. But I also need to scroll that image horizontally (specially for mobile devices) and I cannot explain myself the behaviour I get and how to fix it.

I use flex (through bootstrap classes):

<section id="container">
    <div class="for-mobile d-md-none d-flex overflow-auto justify-content-center">
        <img src="image_bigger_than_div"/>
    </div>
<section>

Additionnal css:

.for-mobile img { flex:none }

The image is well centered and I can scroll on the right side but I cannot scroll on the left side. If I change the flex direction to row reverse, the opposite behaviour occurs. Why? How to fix this please?

Thx

NB: If I don't "justify-content: center", the img is not centered and I can scroll the full image.

Ahmad Dalao Ahmad Dalao · Accepted Answer · 2020-08-21T14:03:44

The code is working fine to me I had to close the section tag just as shown in the code snippet.

I also added class img-fluid to the image to make it responsive but if you want to scroll just remove that class.

<section id="container">
    <div class="for-mobile d-md-none d-flex overflow-auto justify-content-center">
        <img class="img-fluid" src="assets/images/image.jpg" />
    </div>
</section>

And I was able to scroll right and left without any problem...

I also believe the CSS code you provided is not needed.

Cannot scroll on the left an centered img with flex

1 Answers