<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 - `whitespace: no-wrap` prevents flexbox wrap in Safari"
href="https://bugs.webkit.org/show_bug.cgi?id=165048">165048</a>
</td>
</tr>
<tr>
<th>Summary</th>
<td>`whitespace: no-wrap` prevents flexbox wrap in Safari
</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>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>aviewtoaphil@gmail.com
</td>
</tr></table>
<p>
<div>
<pre>Created <span class=""><a href="attachment.cgi?id=295372" name="attach_295372" title="Flex container not wrapping item to next line">attachment 295372</a> <a href="attachment.cgi?id=295372&action=edit" title="Flex container not wrapping item to next line">[details]</a></span>
Flex container not wrapping item to next line
Using the following code, one would expect that when the flex item becomes too narrow to contain its contents, it would wrap to the next flex line. However, in Safari the contents instead overflows the flex item.
Screenshots attached.
<div class="FlexContainer">
<div class="FlexItem">Item 1</div>
<div class="FlexItem">Item 2</div>
<div class="FlexItem">Item 3</div>
</div>
<div class="FlexContainer">
<div class="FlexItem">Item 1</div>
<div class="FlexItem">Item 2</div>
<div class="FlexItem">Item 3 Item 3 Item 3 Item 3 Item 3</div>
</div>
* {
box-sizing: border-box;
}
.FlexContainer {
display: flex;
flex-wrap: wrap;
margin: 10px;
width: 50%;
}
.FlexItem {
flex: 1 0 33%;
padding: 5px;
border: 1px solid black;
white-space: nowrap;
background: red;
}</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>