Material-components-web: Nested grid layouts cause UI to overflow/break

[mether]

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!

[theenoahmason]

Any progress on this? I think this is the largest usability problem in MDC at the moment. This issue has been open since 0.16, and #496 has been marked closed, but it is anything but solved. (Not complaining, the package is incredible!)

An explanation using desktop screen sizes:

• grid-gap is set to 24px.
• desktop column count is 12.
• There are therefore 11 gaps.

If the sum of all gaps (11 * 24) is less than the width of the parent cell (.mdc-layout-grid__cell), Then the grid element (.mdc-layout-grid__inner) can expand it's columns to suit the layout:

The outlines represent the column template. The space between is the grid-gap. Notice there is still room for the columns to collapse.

If the sum of all gaps (11 * 24) is larger than the width of the parent cell (.mdc-layout-grid__cell), Then the grid element (.mdc-layout-grid__inner) overflows. It does not matter that the grid-template has a minimum of 0 and a maximum of 1fr, because at this point the cells themselves are at 0, and the gaps cannot collapse, so the grid cannot collapse any further either:

The outlines represent the column template. The space between is the grid-gap. Notice that the columns are fully collapsed. The grid cannot get any smaller from this point.

What do you think?

[theenoahmason]

@bonniezhou I know you are probably so busy, but please take a look at this ^

[bonniezhou]

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

[elyobo]

Still keen on a better fix for this, but (for our particular use case) eliminating the grid-gap solved our issue.

.mdc-layout-grid__inner .mdc-layout-grid__inner .mdc-layout-grid__inner {       
  grid-gap: 0px;                                                                
}