Search code examples
htmlcssalignmentoverflow

"overflow-x: auto" does not scroll to the left

I have the following code:

#container {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin: 22px;
  gap: 22px;
  overflow-x: auto;
}
<div id="container">
  <image src="https://www.perpetuum.eu/sites/perpetuum.eu/files/inline-images/grid-line.jpg" width="888" />
  <div>This image has a fixed width (and thus also its height). This image will not change as a function of the window size. In a mobile it may overflow.</div>
</div>

When there is an overflow the image is kept in the center (which is what I want). but the scroll bar only goes to the right, so the part in the left cannot be seen. How can I obtain a scroll in both directions? Or otherwise, how can I change the alignment to left only when there is an overflow?

Solution

  • You can't scroll both ways. But you can add a margin to your image and the overflow will work as expected.

    img {
   margin: 0 auto;
}