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

他们的 .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;}