<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] with nowrap, flex content overflows the flexbox"
href="https://bugs.webkit.org/show_bug.cgi?id=161910">161910</a>
</td>
</tr>
<tr>
<th>Summary</th>
<td>[Flexbox] with nowrap, flex content overflows the flexbox
</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>Unspecified
</td>
</tr>
<tr>
<th>OS</th>
<td>Unspecified
</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>code.pen@sophieweb.com
</td>
</tr></table>
<p>
<div>
<pre>With two flex divs inside a flexbox, the first div containing long text, the content of the second div overflows the flexbox even when wrapping the first text would allow space for the second to be displayed inside the flexbox.
Example here, when resizing screen to for example 600px wide :
<a href="https://codepen.io/SophieWeb/pen/VKZQjR">https://codepen.io/SophieWeb/pen/VKZQjR</a></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>