RESOLVED FIXED 137517
Flex many items does not always fill the space of the container 
https://bugs.webkit.org/show_bug.cgi?id=137517
Summary Flex many items does not always fill the space of the container
Phil Linnell
Reported 2014-10-08 04:03:51 PDT
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/
Attachments
Add attachment proposed patch, testcase, etc.
Phil Linnell
Comment 1 2014-10-14 03:21:24 PDT
This was valid for Safari 7.06. Update to Safari 7.1 has fixed this problem.
Note You need to log in before you can comment on or make changes to this bug.