[Bug Report] grid-list affects nested flex items when it should only affect the top most layer flex items

[austinpe]

Versions and Environment

Vuetify: 1.4.3
Vue: 2.5.22
Browsers: Chrome 71.0.3578.98
OS: Windows 10

Steps to reproduce

Make a v-layout with a grid-list prop that contains flex items with nested flex items

Expected Behavior

The gutter should only impact the top level flex items (as in .flex items that are direct children of the .layout item that is a direct child of the .container item), not the nested flex items

Actual Behavior

The grid-list functionality adds padding and margin to nested flex items as well as the direct child flex items

Reproduction Link

https://codepen.io/austinpe/pen/LqELMr

Other comments

In the codepen, I put the css from the /components/_grid.styl and used red borders to show that it was targeting nested flex items.

Then, I made a "custom" class with green borders that shows how this could be fixed using the ">" css selector so that only the top most level flex items are targeted.

Basically:
The styl should read:

.container
  &.grid-list
    for $size, $gutter in $grid-gutters
      &-{$size}
        > .layout
          > .flex
            padding: ($gutter / 2)

not:

.container
  &.grid-list
    for $size, $gutter in $grid-gutters
      &-{$size}
         .layout
           .flex
            padding: ($gutter / 2)

[johnleider]

This is something @Phlow2001 tried to fix in the past but I was too stubborn. It's on the radar and will be resolved as part of 2.0.

Duplicate of #6020