<html>
<head>
<base href="https://bugs.webkit.org/" />
</head>
<body><table border="1" cellspacing="0" cellpadding="8">
<tr>
<th>Bug ID</th>
<td><a class="bz_bug_link
bz_status_NEW "
title="NEW - Fractional-width floated boxes in flexbox, flex-flow: row wrap get laid out one pixel to the right"
href="https://bugs.webkit.org/show_bug.cgi?id=145236">145236</a>
</td>
</tr>
<tr>
<th>Summary</th>
<td>Fractional-width floated boxes in flexbox, flex-flow: row wrap get laid out one pixel to the right
</td>
</tr>
<tr>
<th>Classification</th>
<td>Unclassified
</td>
</tr>
<tr>
<th>Product</th>
<td>WebKit
</td>
</tr>
<tr>
<th>Version</th>
<td>528+ (Nightly build)
</td>
</tr>
<tr>
<th>Hardware</th>
<td>Unspecified
</td>
</tr>
<tr>
<th>OS</th>
<td>Mac OS X 10.10
</td>
</tr>
<tr>
<th>Status</th>
<td>NEW
</td>
</tr>
<tr>
<th>Severity</th>
<td>Normal
</td>
</tr>
<tr>
<th>Priority</th>
<td>P2
</td>
</tr>
<tr>
<th>Component</th>
<td>Layout and Rendering
</td>
</tr>
<tr>
<th>Assignee</th>
<td>webkit-unassigned@lists.webkit.org
</td>
</tr>
<tr>
<th>Reporter</th>
<td>dwood@karelia.com
</td>
</tr></table>
<p>
<div>
<pre>Created <span class=""><a href="attachment.cgi?id=253482" name="attach_253482" title="Reduction showing problem with layout of flexbox">attachment 253482</a> <a href="attachment.cgi?id=253482&action=edit" title="Reduction showing problem with layout of flexbox">[details]</a></span>
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.</pre>
</div>
</p>
<hr>
<span>You are receiving this mail because:</span>
<ul>
<li>You are the assignee for the bug.</li>
</ul>
</body>
</html>