Bug 165048 – `whitespace: no-wrap` prevents flexbox wrap in Safari

• Component: CSS
• Status: RESOLVED FIXED

Created attachment 295372 [details]
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;
}

Created attachment 295373 [details]
Flex container correctly wrapping item to next line (in Chrome, Firefox)

[alan]

Created attachment 295596 [details]
Test reduction

[Radar WebKit Bug Importer]

<rdar://problem/29464628>

[Dave Hyatt]

Fixed by recent changes to merge in with Blink code.