Flexbox content not showing properly

user_10911490 0
Viewed 69

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>

flexbox css html
2 Answers

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>

user_17123450

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>

user_189618140
Related