1369131 - CSS Grid and white-space: nowrap does not work as expected on nested elements

Status: UNCONFIRMED

(Core :: Layout, defect, P3)

Description

[chip]

User Agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_12_5) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/58.0.3029.110 Safari/537.36

Steps to reproduce:

When using white-space: nowrap and overflow: hidden together, when used in conjunction with CSS grid, is producing inconsistent results. This seems to have been partially addressed already, but I've noticed a continued problem when the string in question is *nested* element with "display: grid" applied:

1. Open this codepen: https://codepen.io/chipcullen/pen/GmVxdV
2. Note both strings of text have:
    - white-space: nowrap;
    - overflow: hidden;
    - text-overflow: ellipsis;



Actual results:

This seems to have been partially addressed. 

In Firefox 53: 
1. both boxes extend to the length of the string, with no ellipsis visible

In Firefox 55:
1. The first string, which is a direct child of the element with "display: grid" on it, cuts off at the expected width of the box, and an ellipsis is visible
2. The second string, which is a *nested element* inside the element with "display: grid" continues to push the width of the box out, and no ellipsis is visible


Expected results:

1. Both strings should be cut off at the 'width' of the box, with an ellipsis visible.