Vue Material components in existing application

Question

I'd like to use the md-card material from Vue Material in an existing application. The example on the website (https://vuematerial.io/components/card/) uses the following:

<template>
  <div>
    <md-card>
      ...
    </md-card>

    <md-card md-with-hover>
      ...
    </md-card>
  </div>
</template>

When I use this in the HTML page and create a Vue object for the containing div, the components do show, but the layout is not working. I have tinkered with the layout classes, but the behavior is not matching the example. How can I configure the layout in a plain HTML page to match the example's layout behavior? Is the example page adding another layer to the example div to create the layout behavior?

Updated: I tried a similar scenario in JsFiddle, and it works perfectly: https://jsfiddle.net/w9m6q05f/3/ . In my application, the cards are always in a column regardless of the width of the view, and the bottom card is stretched towards the bottom of the view. Do I need to set the class of the containing div? It may be getting overwritten by my application somewhere else.

Update 2: The culprit is which has height: 100%