<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 - flex-wrap: wrap and causes flex item's size to be 0 when it has element with percentage padding"
href="https://bugs.webkit.org/show_bug.cgi?id=150601">150601</a>
</td>
</tr>
<tr>
<th>Summary</th>
<td>flex-wrap: wrap and causes flex item's size to be 0 when it has element with percentage padding
</td>
</tr>
<tr>
<th>Classification</th>
<td>Unclassified
</td>
</tr>
<tr>
<th>Product</th>
<td>WebKit
</td>
</tr>
<tr>
<th>Version</th>
<td>Safari 9
</td>
</tr>
<tr>
<th>Hardware</th>
<td>Macintosh
</td>
</tr>
<tr>
<th>OS</th>
<td>Mac OS X 10.11
</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>i.safareli@gmail.com
</td>
</tr></table>
<p>
<div>
<pre>When flex container's flex-wrap is set to wrap, flex item's size is 0 if it has element with percentage padding
problem is when percentage padding is on direction of flex container:
top, bottom on column and left, right on row.
so for example you can use percentage value for padding-[top | bottom] when flex-direction is row
but not for padding-[left | right]
here is example to reproduce this issue: <a href="http://codepen.io/safareli/pen/Oyprdr?editors=100">http://codepen.io/safareli/pen/Oyprdr?editors=100</a>
curently there is no workaround for this <a href="https://github.com/philipwalton/flexbugs/issues/86">https://github.com/philipwalton/flexbugs/issues/86</a>
Safari Version : 9.0.1 (11601.2.7.2)
Other browsers tested:
FAIL Chrome: 46.0.2490.80 (Official Build) (64-bit)
FAIL Firefox: 41.0.2</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>