Bug 137517
| Summary: | Flex many items does not always fill the space of the container | ||
|---|---|---|---|
| Product: | WebKit | Reporter: | Phil Linnell <phil.linnell> |
| Component: | CSS | Assignee: | Nobody <webkit-unassigned> |
| Status: | RESOLVED FIXED | ||
| Severity: | Normal | ||
| Priority: | P2 | ||
| Version: | 528+ (Nightly build) | ||
| Hardware: | Mac | ||
| OS: | OS X 10.9 | ||
| URL: | http://jsfiddle.net/8p6mnr9g/5/ | ||
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/
| Attachments | ||
|---|---|---|
| Add attachment proposed patch, testcase, etc. |
Phil Linnell
This was valid for Safari 7.06.
Update to Safari 7.1 has fixed this problem.