<分区>
我喜欢有一个 div，它的所有子项都位于中心(垂直和水平)。我可以通过使用 flexbox 轻松实现这一点。但是当我的 child 的宽度比 parent 的宽度大时，一部分 child 是不可见的。
我该如何解决这个问题？
* {
margin: 0;
padding: 0;
}
.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>最佳答案
您只需要将 justify-content 更改为 flex-start
见下文。
如果你想让 H1 居中，只需使用 text-align: center
* {
margin: 0;
padding: 0;
}
.container {
height: 500px;
width: 500px;
background: red;
display: flex;
justify-content: flex-start;
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>关于html - Flexbox 内容显示不正确，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/72025890/