Nested grid layouts cause UI to overflow/break

What MDC-Web Version are you using?

0.16.0

What browser(s) is this bug affecting?

Mozilla/5.0 (Macintosh; Intel Mac OS X 10_11_6) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/59.0.3071.115 Safari/537.36

Also affects Firefox: Mozilla/5.0 (Macintosh; Intel Mac OS X 10.11; rv:54.0) Gecko/20100101 Firefox/54.0

What OS are you using?

OSX 10.11.6, but tested it on a coworkers laptop running OS 10.12.5

What are the steps to reproduce the bug?

1. Run the demo server (or view the demo site)
2. Go to localhost:8080/layout-grid.html (or https://material-components-web.appspot.com/layout-grid.html)
3. Ensure that the Desktop Margin and Desktop Gutter are set to the defaults of 24px
4. Scroll to the Grid nested within parent cell example
5. Resize the browser window to <939px width (may vary per screen)
6. Notice that the gutter between the first and second elements begin to shrink and eventually overlap, before resizing to tablet <840px

I also have a template on CodePen which I made to test whether it had something to do with the amount of nested grids or the span size of the cells.

What is the expected behavior?

I would expect it to continue resizing down gracefully instead of breaking out of the grid/alignment.

What is the actual behavior?

mdc-layout-grid__cell are overflowing outside of their mdc-layout-grid__inner wrappers when the mdc-layout-grid__inner width is too small.

Any other information you believe would be useful?

Here’s an additional example wireframe of the layout I’m trying to achieve

Notice how on resize the elements 3 and 4 overflow outside the grid

Hopefully this is enough info, let me know if I missed anything!

Loving the library btw 😃 Cheers!

[bonniezhou]

Yep it’s a bug, thanks for filing it! It’s put in the tracker.

[elyobo]

I’m sorry, but I have no idea any more!