[Webkit-unassigned] [Bug 137517] New: Flex many items does not always fill the space of the container

[bugzilla-daemon at webkit.org]

https://bugs.webkit.org/show_bug.cgi?id=137517

           Summary: Flex many items does not always fill the space of the
                    container
           Product: WebKit
           Version: 528+ (Nightly build)
          Platform: Macintosh
               URL: http://jsfiddle.net/8p6mnr9g/5/
        OS/Version: Mac OS X 10.9
            Status: NEW
          Severity: Normal
          Priority: P2
         Component: CSS
        AssignedTo: webkit-unassigned at lists.webkit.org
        ReportedBy: phil.linnell at yahoo.co.uk


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/

-- 
Configure bugmail: https://bugs.webkit.org/userprefs.cgi?tab=email
------- You are receiving this mail because: -------
You are the assignee for the bug.