How to make a flexbox overflowable?

Question

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 my children width get bigger than the parent, overflow: scroll does not work

Codepen

Anybody know why and how can be fixed?

Update

My issue has been fixed. BUT, when I add a content to children, the content not showing correctly.

.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>

score 1 · Accepted Answer · answered Apr 26 '22 at 21:00

1

It looks like the child object is not actually 1200px - it's getting squished down to 500px. However, if you set min-width: 1200px; in the child component, it seems to override this and produces the behavior you expect.

answered Apr 26 '22 at 21:00

chase

317
2
9

1

That's because of ```flex-wrap``` behavior – Mahdiar Mransouri Apr 26 '22 at 21:02
1

Thanks' a lot. This really solved my issue. But I'm wondering why I don't need to min-height when height of that children is bigger then 500px!!! Do you know why? – Arian Nargesi Apr 26 '22 at 21:09
It looks like the height of the child is only `50px` – chase Apr 26 '22 at 21:29
1

@chase. Yes. It is 50px. But when I change it to something bigger than the parent, overflow work perfectly! – Arian Nargesi Apr 27 '22 at 07:37
I added some content to children. content not showing correctly. @chase – Arian Nargesi Apr 27 '22 at 08:04

How to make a flexbox overflowable?

1 Answers1