"overflow-x: auto“不会向左滚动

Question

我有以下代码：

​

#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>

​

当有溢出时，图像被保持在中心(这就是我想要的)。但是滚动条只会向右移动，所以看不到左边的部分。如何获得两个方向的滚动？否则，当存在溢出时，我如何才能将对齐方式更改为左对齐？

Answer 1

你不能两个方向都滚动。但是你可以在你的图片中添加一个页边距，溢出效果就会如你所愿。

img {
   margin: 0 auto;
}