<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 - Flexbox's column wrap with auto height produces an unspecified layout"
href="https://bugs.webkit.org/show_bug.cgi?id=143526">143526</a>
</td>
</tr>
<tr>
<th>Summary</th>
<td>Flexbox's column wrap with auto height produces an unspecified layout
</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>Macintosh Intel
</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>CSS
</td>
</tr>
<tr>
<th>Assignee</th>
<td>webkit-unassigned@lists.webkit.org
</td>
</tr>
<tr>
<th>Reporter</th>
<td>willhig@gmail.com
</td>
</tr></table>
<p>
<div>
<pre>Created <span class=""><a href="attachment.cgi?id=250362" name="attach_250362" title="A screenshot from StackOverflow <http://bit.ly/1CVv8UA>">attachment 250362</a> <a href="attachment.cgi?id=250362&action=edit" title="A screenshot from StackOverflow <http://bit.ly/1CVv8UA>">[details]</a></span>
A screenshot from StackOverflow <<a href="http://bit.ly/1CVv8UA">http://bit.ly/1CVv8UA</a>>
Using only the CSS rules in this JSFiddle: <a href="http://jsfiddle.net/p2kcLh9n/">http://jsfiddle.net/p2kcLh9n/</a> the flex parent's height should, according to the spec, increase to contain all of the flex items, and the flex items should all grow to fit that increased height. Instead, the height of the flex parent appears to be determined just by the first flex item in flex-direction: column flex-wrap: wrap scenarios.
Gecko appears to render this correctly, but these rules don't produce the specified layout in Chrome or Safari as of this writing.</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>