CSS-Overflow-x:滚动剪切div的开头

Question

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

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

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

在里面，我有一些框div，也有一个固定的宽度(300px(。

容器div具有overflow-x:scroll，因此其思想是，如果div溢出，您可以滚动它。

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

欢迎任何提示或帮助！

Answer 1

要修复此问题，您可以将.ccontainer justify内容值从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;
}