Flex many items does not always fill the space of the container

• Component: CSS
• Status: RESOLVED FIXED

[Phil Linnell]

When using flex for many items, the pixels are shared evenly but any left over pixels are not distributed to the items - this therefore leaves a gap (depending on the size of the container).

To reproduce:
1. Create a <ul> with many <li> e.g. 10
2. Give the <ul> display: -webkit-flex and the <li> -webkit-flex: 1
3. Give the <ul> a background-color and the <li> a different colour.
4. Adjust browser size/container and <li> flexes in 'steps'. The <ul> background-color is visible at the end at certain points.
5. This is not an initial render problem as it occurs on load if the size of the container does not fix the flex exactly.

Expect: The <li> to flex to fill the <ul> completely

Actual: The <li> flex but if the left over pixels is less than the amount of <li> (this is why you need many) then they are not distributed as expected thus leaving a gap at the end of the <ul>.

My fiddle of the issue: http://jsfiddle.net/8p6mnr9g/4/

[Phil Linnell]

This was valid for Safari 7.06.

Update to Safari 7.1 has fixed this problem.