如何使flexbox可溢出?

Question

我喜欢有一个div，保持所有的子元素在中心(垂直和水平)。我可以通过使用flexx轻松实现这一点。但是当子元素的宽度大于父元素时，overflow: scroll就不起作用了

Codepen

谁知道为什么和如何可以修复?

我的问题已被修复。但是，当我将内容添加到子元素时，内容不能正确显示。

.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

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