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

【问题标题】：CSS - Overflow-x: scroll cuts off beginning of divCSS - Overflow-x：滚动切断 div 的开头
【发布时间】：2020-07-11 16:29:13
【问题描述】：

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

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

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

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

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

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

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

【问题讨论】：

标签： html css sass less

【解决方案1】：

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

【讨论】：

这就是重点：D 比容器宽 4 个框，这样我就可以显示滚动条

【解决方案2】：

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

【讨论】：

这也是我的问题，但是如果我们确实希望它在内容适合时（不需要滚动时）居中怎么办？