Seeking a solution for keeping all children of a div centered both vertically and horizontally, even when the width exceeds that of the parent. Flexbox can achieve this easily, but encountering issues with overflow: scroll functionality.
If anyone understands why this is happening and knows how to fix it, I'd appreciate your input.
Update:
The initial issue has been resolved. However, now facing an alignment problem when adding content to the children elements.
.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>