Flex box fit width with it's childs when child is out of window?

Question

I'm using a column wrap layout, and the page is going to load new content and append them as new children elements to the parent box element, so I hope the box width auto fit to the children elements.

Codes here: https://codepen.io/mashirozx/pen/exgRqV

What it looks now:

My hope (Notice the overflow-x bar):

Problem solved:

Adding overflow: auto to the flex box.

i get the OP point:remove the `width:200%` from parent and you will see the issue — לבני מלכה, Jan 31 '19 at 08:50

score 0 · Answer 1 · answered Jan 31 '19 at 08:49

0

Try to change:

flex-container-content > div {
  background-color: #EB213C;
  width: auto;
  margin: 10px;
  text-align: center;
  line-height: 75px;
  font-size: 30px;`

answered Jan 31 '19 at 08:49

Angelotti

673
1
6
20

It looks like the OP wants the scroll – לבני מלכה Jan 31 '19 at 08:52
ok in that case if he want scroll he have to add 'owerflow:scroll' in '.flex-container-content' at your suggest 'width:200%' – Angelotti Jan 31 '19 at 09:06

Flex box fit width with it's childs when child is out of window?

1 Answers1