'Flexbox content not showing properly [duplicate]

I like to have a div that keeps all it's children in the center (vertical and horizontal). I can easily achieve this by using flexbox. But when width of my children get bigger than the parent, a part of children is not visible.

How can I fix this?

Codepen

* {
  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>
htmlcssflexbox


Solution 1:[1]

You just have to change the justify-content to be flex-start

See below.

And if you want the H1 to be centered, just use 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>

Solution 2:[2]

Change the
.container{ min-width: 100%}

* {
  margin: 0;
  padding: 0;
}
.container {
   height: 500px;
   width: 500px;
   background: red;
   display: flex;
   justify-content: center;
   align-items: center;
   overflow: scroll;
}
.children {
   min-width: 100%;
   height: 50px;
   background: blue;
}
<div class='container'>
  <div class="children">
    <h1>Welcome to my city, california</h1>
  </div>
</div>

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1
Solution 2 ZebraCoder

Related Questions