Vue-material: [MdGutter] unwanted scrollbar, missing gutters

[pskaarup]

Steps to reproduce

<div class="md-layout md-gutter">
  <div class="md-layout-item">
    <md-card>
      <md-card-content>foo 1</md-card-content>
    </md-card>

    <md-card>
      <md-card-content>foo 2</md-card-content>
    </md-card>

    <md-card>
      <md-card-content>foo 3</md-card-content>
    </md-card>
  </div>
</div>

above html causes a horizontal scrollbar to be shown. This is caused by the following in the mixin md-layout-gutter

margin-right: -$spacing;
margin-left: -$spacing;

Bug 1: Gutter causes horizontal scrollbar
Bug 2: Gutter is missing on left- and right-most md-layout-item
Bug 3: Gutter is missing when a md-layout-item folds onto new line. Gutter should be added above or below

Which browser?

Chrome 65+
"vue-material": "^1.0.0-beta-7"

What is expected?

1: no scrollbar shown
2: Gutter should be shown
3: Gutter should be shown

What is actually happening?

1: scrollbar is shown
2/3: No gutter is shown

Reproduction Link

https://codepen.io/pskaarup/pen/GxGRaa

[VdustR]

1. hidden the scroll if overflow:

html, body, #app {
  width: 100vw;
  height: 100vh;
  overflow-x: hidden;
}

1. There is not space on the most left and right side with gutter.
   If you still want space around items, you could use .md-layout with .md-alignment-[vertical]-space-around and .md-layout-item with .md-size-25 in your case.

[UXMichael]

The md-gutter class is buggy.

[pskaarup]

@VdustR I disagree with your solution https://material.io/guidelines/layout/metrics-keylines.html#metrics-keylines-keylines-spacing specify:

Screen edge left and right margins: 16dp

md-layout or md-gutter may not be the place to add this margin but it should be enforced by standard material design classes.

Additionally overflow-x: hidden isn't a good solution to solve this issue. I solved it as such

<div class="page-container">
  <div class="md-layout md-gutter">
    <div class="md-layout-item">
      <md-content>
        foo
      </md-content>
    </div>
  </div>
</div>

.page-container {
  padding: $md-gutter-medium;
}

the padding on page-container is obviously changed with screen size breakpoints.

[Samuell1]

md-gutter works only on layout items it should not add padding on sides,

@pskaarup like you said you should use your container that have paddings on sides for your usage

[pskaarup]

I'd say that some md-class should add this padding as described by google.

However as related to my issue we can close this issue.