如何使 flexbox 可溢出？

Question

我喜欢 div 将所有 children 保持在中心（垂直和水平）。我可以通过使用 flexbox 轻松实现这一点。但是当我的 children 宽度大于 parent 时，溢出：滚动不起作用

有人知道为什么以及如何解决吗？

更新

我的问题已经解决。但是，当我向 children 添加内容时，内容显示不正确。

.container {
  height: 500px;
  width: 500px;
  background: red;
  display: flex;
  justify-content: center;
  align-items: center;
  overflow: scroll;
}

.children {
  min-width: 1200px;
  height: 50px;
  background: blue;
}

<div class='container'>
  <div class="children"><h1>Welcome to my city, California</h1></div>
</div>

Answer 1

看起来子对象实际上不是 1200 像素 - 它被压缩到 500 像素。但是，如果您在子组件中设置 min-width: 1200px;，它似乎会覆盖它并产生您期望的行为。

如何使 flexbox 可溢出？

How to make a flexbox overflowable?

html

css

flexbox