3

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>
Arian Nargesi
  • 506
  • 1
  • 4
  • 13
  • 1
    Because you flexbox is smaller than the child , it still tries to center the child and make it overflow on both sides. You can avoid this using the keyword `safe` : `justify-content: safe center;` or drop it and use margin on the child instead. – G-Cyrillus Apr 27 '22 at 08:58
  • 1
    have you read my earlier comment? did it fix something ? ... also, remove that min-width and let your *dynamic* child to size itself. ... if it is dynamic but at least 1200px , there won't be much to see happen for short texts. – G-Cyrillus Apr 27 '22 at 09:12
  • 1
    @G-Cyrillus ```justify-content: safe center;``` didn't fix it. Actually had no effect – Arian Nargesi Apr 27 '22 at 09:16
  • 1
    okay, see https://stackoverflow.com/questions/47635911/how-to-use-safe-center-with-flexbox This is not yet avalaible in every browsers. .what about min-width ? – G-Cyrillus Apr 27 '22 at 09:35

2 Answers2

0

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>
treckstar
  • 1,956
  • 5
  • 21
  • 26
  • 1
    I like to keep the children at the center. so if you add flex-start content will stick to left if children is smaller than parent – Arian Nargesi Apr 27 '22 at 09:05
  • 1
    The point is my children is really dynamic. It's not a h1 all the time. It should be stable in all situations – Arian Nargesi Apr 27 '22 at 09:06
  • Ok well the answer to your question is that the child with justify-content being set to center, while in a overflow: scroll container, will appear off the screen. I'd suggest coming up with a more semantic HTML markup then. – treckstar Apr 27 '22 at 09:08
  • 1
    So it's not possible with current structure right? – Arian Nargesi Apr 27 '22 at 09:10
  • With your current structure, if you must keep the CSS the same, you could use JavaScript to dynamically change the width, if it truly is dynamic. Otherwise, if you have a 500px container, and a child content that could be 1200px, what do you expect it to do? You could maybe just set all children to be max-width: 500px; margin: 0 auto; to be centered. – treckstar Apr 27 '22 at 09:16
  • The JS function would just compare the children width to the parent width, and if its bigger, then dont justify-content center. Make sense? – treckstar Apr 27 '22 at 09:19
  • 1
    Yes. totally make sense. Thank you – Arian Nargesi Apr 27 '22 at 09:26
-1

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>
ZebraCoder
  • 1,480
  • 1
  • 5
  • 12