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;

}