html - CSS - 如果内容到达边距，则将内容向左对齐

Question

所以我有这个 flex 全宽容器，里面有一些对象。它还有一个水平滚动条。里面的对象是动态加载的，所以它们可以是 2 或 15，宽度也不同。如您所见，它们在容器内居中。

如果您将浏览器窗口宽度减小到 ojects 不适合容器内的程度，滚动条不会让我滚动到第一个对象。

如果不清楚，我很抱歉，尽量用语言。我真的希望你能帮助我。

.container {
  width: 100%;
  height: 40px;
  background: #444;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: auto;
  overflow-y: hidden;
}

.object {
  padding: 8px 30px;
  color: white;
  white-space: nowrap;
}

.one {
  background: red;
}

.two {
  background: green;
}

.three {
  background: blue;
}

<div class="container">
  <div class="object one">THIS IS CHILD ONE</div>
  <div class="object two">THIS IS CHILD TWO</div>
  <div class="object three">THIS IS CHILD THREE</div>
</div>

标签： htmlcssflexbox