Bug 145236 – Fractional-width floated boxes in flexbox, flex-flow: row wrap get laid out one pixel to the right

• Status: NEW
• Component: Layout and Rendering

[Dan Wood]

Created attachment 253482 [details]
Reduction showing problem with layout of flexbox

In some circumstance when you have a div with a fractional width (e.g. 66.666%) laid out NOT as a flex box, in a flex box container with 'row wrap' as its flex-flow value, it is laid out one pixel to the right of where it should be.  (You can see the left edge of the containing div, but you shouldn't)

The attached reduction file shows examples of the problem and some workarounds:

1) The problem

2) A workaround by calculating the width of the larger div to be calc (66.666% - 1px) to make the items fit.

3) An exception to the problem - if it is preceded by a 100% width div

4) A workaround by not specifying the 'row wrap' value of flex-flow.

[Dan Wood]

Created attachment 253499 [details]
Additional test case added to reduction, showing 3 items with wrong left-right margins

I've added another attachment. It's the same as above, but a similar issue that is probably related.    I have 3 boxes side by side, and they should use up the entire width of their containing flexbox div.  But they don't - there is an extra pixel on the left AND the right where you can see the background color of the containing div shining through.  And, this means that the divs are narrower than if, for example, you and 3 side-by-side divs (floated) at 33.33333% width.