CSS

Question

这可能是一个简单的修复，但我无法在任何地方找到它 - 也许我一直在使用错误的术语，所以如果我重复一个已经被问过的问题，我深表歉意。

我创建了这个 stackblitz 演示：https://stackblitz.com/edit/angular-ftv8ez

我运行遇到这个问题，我有一个固定宽度 (300px) 的容器 div。

在其中，我有一些框 divs，同样具有固定宽度 (300px)。

容器 div 有 overflow-x: scroll，所以你可以滚动 div 如果它溢出。

但是，结果并未按预期执行。容器 div 的开头被缩短，导致无法将第一个框滚动到视图中。

非常欢迎任何提示或帮助！

Answer 1

要修复它，您可以将 .container justify-content 值从 justify-content:center 更改为 justify-content:start

Answer 2

他们是你的代码中的一个错误。css 在 .Box 中，您需要更改 .box 中的高度和宽度，或者需要更改滚动容器的宽度，因为您将 300px 的大小设置为 500 或更小，并且放置了 4 种 100px 的颜色，现在我将代码更正为 50px 并且它有效。

p {
  font-family: Lato;
}
.container {
  display: flex;
  justify-content: start;
  width: 300px;
  overflow-x: scroll;
}
.red {
  background-color: red;
  margin-right: 10px;
  flex-shrink: 0;
}
.yellow {
  background-color: yellow;
  margin-right: 10px;
  flex-shrink: 0;
}
.blue {
  background-color: blue;
  margin-right: 10px;
  flex-shrink: 0;
}
.green {
  background-color: green;
  flex-shrink: 0;
}

.box {
  width: 50px;
  height: 50px;
}

CSS - Overflow-x：滚动截断 div 的开头

CSS - Overflow-x: scroll cuts off beginning of div

html

sass

less