Overflow doesn't make flexbox container's children to resize

Question

I've in my layout a footer which has display: flex; position: absolute; height: auto; width: 100%; align-items: flex-start; justify-content: space-around;. Inside it there are a undefined number of divs which shall resize according to it's content.

In my tests, I put 3 divs within footer, one of them (3rd one) with a large width content. These divs are getting resized strangely... The 3rd is taking on a piece of 1st and 2nd's width making they having their content broken, see:

overflow: auto; doesn't work as expected because just adds a horizontal scrolling.

How can I fix this problem? Why 3rd div has priority resizing to accommodate it's content?

And another thing: as you can see, first red div has as content a list. Strangely only it's first item has a marker. I applied no CSS for that and adding display: none; (could be a out of space problem) to 2nd and 3rd divs doesn't fix it. What the what?

Obs: English tips referring to this message are welcome as well. =D

See all this things here: http://jsfiddle.net/T5YSe/

Answer 1

All three of your flex items are shrinking (when there's not enough space to accommodate their collective preferred widths) due to their default flex-shrink: 1 value.

You can use the flex shorthand to fix this -- in particular, you probably want to make the first two flex items flex: none, to prevent them from flexing at all (and in particular, from shrinking below their intrinsic width). However, you probably do want the third item to be able to shrink (below the width of its single line of text), so that one probably wants to still have the default flex: 0 1 auto.

Fiddle with that fixed (flex property added to footer-column CSS and to the inline style rule for the third column): http://jsfiddle.net/R3zCk/

(I didn't bother adding prefixed versions of my "flex" shorthands in the fiddle above; you can do that if you like.)

Answer 2

Refer to dholbert's answer to solve the problem with the flexbox.

As for your list not displaying properly, that's because it's using the tags backwards. It should be written like this:

<ul>
  <li>Item 1</li>
  <li>Item 2</li>
  <li>Item 3</li>
  <li>Item 4</li>
  <li>Item 5</li>
  <li>Item 6</li>
  <li>Item 7</li>
</ul>