I am getting 2 scroll bars using MDL, how can I fix it?

Question

I am getting 2 scroll bars using mdl by google. I have added my html below. How can I fix this? View code on codepen

<div class="mdl-grid">
    <div class="mdl-cell mdl-cell--8-col mdl-cell--8-col-desktop mdl-cell--12-col-tablet  mdl-cell--12-col-phone">
        <div class="mdl-shadow--2dp mdl-color--white mdl-cell mdl-cell--12-col"></div>
        <div class="mdl-shadow--2dp mdl-color--white mdl-cell mdl-cell--12-col"></div>
    </div>
    <div class="mdl-cell mdl-cell--4-col mdl-cell--4-col-desktop mdl-cell--4-col-tablet  mdl-cell--12-col-phone"></div>
</div>
</div>

Answer 1

There were a number of problems with your codepen.

Multiple layouts

There seemed to be an extra layout in your codepen, for some reason. I'm assuming this was a copy-paste error.

Nested grids

When using nested grids, make sure that inner grids are both an mdl-cell and an mdl-grid, otherwise the inner ones don't act as grids. So, in your snippet:

<div class="mdl-grid">
  <div class="mdl-cell mdl-grid mdl-cell--8-col mdl-cell--8-col-desktop mdl-cell--12-col-tablet  mdl-cell--12-col-phone">
    <div class="mdl-shadow--2dp mdl-color--white mdl-cell mdl-cell--12-col"></div>
    <div class="mdl-shadow--2dp mdl-color--white mdl-cell mdl-cell--12-col"></div>
  </div>
  <div class="mdl-cell mdl-grid mdl-cell--4-col mdl-cell--4-col-desktop mdl-cell--4-col-tablet  mdl-cell--12-col-phone"></div>
</div>

Menu button placement

The menu buttons were outside of your cards and inside the grid, while not being cells. This was causing overflow and positioning issues until the menus were triggered. Moving them inside the cards (where I assume you want them) fixes this.

Repeated IDs

You were using the same ID for all menu buttons, which caused a single click to trigger all menus.

Missing classes in menu items

You were missing some classes in some menu items.

I fixed all of this for you in this codepen.