Overflow-x：滚动切断 div 的开头

Question

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

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

我遇到了这个问题，我有一个固定宽度（300px）的容器div。

在其中，我有一些盒子 div，也具有固定宽度（300px）。

容器div有overflow-x:scroll，所以我们的想法是，如果div溢出，你可以滚动它。

然而，结果并没有达到预期。容器 div 的开头被缩短，这导致无法将第一个框滚动到视图中。

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

Answer 1

要修复此问题，您可以将 .container justify-content 值从

justify-content:center

更改为

justify-content:start

Answer 2

正如 @raquelhortab 所指出的，接受的解决方案并不涵盖我们确实希望内容在非溢出场景中居中的情况。为此，现在（自 2018 年起在 Firefox 中）

justify-content

属性有可选的“overflow-position”参数，该参数可以选择位于“content-position”（即常规）值之前：

justify-content: safe center;

这样，溢出的内容将被视为

justify-content

设置为开始。

请参阅 https://developer.mozilla.org/en-US/docs/Web/CSS/justify-content#safe

Answer 3

你的 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;
}