[Webkit-unassigned] [Bug 165048] New: `whitespace: no-wrap` prevents flexbox wrap in Safari

[bugzilla-daemon at webkit.org]

https://bugs.webkit.org/show_bug.cgi?id=165048

            Bug ID: 165048
           Summary: `whitespace: no-wrap` prevents flexbox wrap in Safari
    Classification: Unclassified
           Product: WebKit
           Version: Safari 9
          Hardware: Macintosh
                OS: OS X 10.11
            Status: NEW
          Severity: Normal
          Priority: P2
         Component: CSS
          Assignee: webkit-unassigned at lists.webkit.org
          Reporter: aviewtoaphil at gmail.com

Created attachment 295372
  --> https://bugs.webkit.org/attachment.cgi?id=295372&action=review
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;
}

-- 
You are receiving this mail because:
You are the assignee for the bug.
-------------- next part --------------
An HTML attachment was scrubbed...
URL: <https://lists.webkit.org/pipermail/webkit-unassigned/attachments/20161123/6b476d44/attachment.html>