スクロールバーをvue onsenui v-ons-cardに自動的に追加する方法

Question

v-ons-list-item要素を多く追加すると、OnsenUI2 ons-card（特にVue2.js v-ons-card）のドキュメントにはコンテンツの横にスクロールバーが自動的に表示されます。

ここを参照してください：私は手動でそれを行うときに

しかし：https://onsen.io/v2/api/vue/v-ons-card.html

は、ここで私は、余分なリストアイテムとチュートリアルを変更するときに何が起こるかのスクリーンショットだと、スクロールバーが追加私のコード私はスクロールバーを取得します。

<v-ons-card> 
    <div class="title"> 
    My title here 
    </div> 
    <div class="content"> 
    <v-ons-list> 
     <!-- <v-ons-list-header>row 1</v-ons-list-header> --> 
     <v-ons-list-item>Row 1</v-ons-list-item> 
     <v-ons-list-item>Row 2</v-ons-list-item> 
     <v-ons-list-item>Row 3</v-ons-list-item> 
     <v-ons-list-item>Row 4</v-ons-list-item> 
     <v-ons-list-item>Row 5</v-ons-list-item> 
     <v-ons-list-item>Row 6</v-ons-list-item> 
     <v-ons-list-item>Row 7</v-ons-list-item> 
     <v-ons-list-item>Row 8</v-ons-list-item> 
     <v-ons-list-item>Row 9</v-ons-list-item> 
     <v-ons-list-item>Row 10</v-ons-list-item> 
     <v-ons-list-item>Row 11</v-ons-list-item> 
     <v-ons-list-item>Row 12</v-ons-list-item> 
     <v-ons-list-item>Row 13</v-ons-list-item> 
     <v-ons-list-item>Row 14</v-ons-list-item> 
     <v-ons-list-item>Row 15</v-ons-list-item> 
     <v-ons-list-item>Row 16</v-ons-list-item> 
    </v-ons-list> 
    </div> 
</v-ons-card> 

どのように達成されましたか？

この例では完全なCSSが表示されていません。chrome devtoolsではデモアプリケーションを開いて表示できません。 :-(

は何もしないカードのコンテンツに、またはカード自体に、カード内部を包むDIVにstyle="overflow: auto"を追加する。

Answer 1

そのチュートリアルで余分なCSSはありません。あなたのイメージでスクロールバーカードの要素ではなくページの内容になっています。heightとoverflow: autoを設定すると、カードスクロールバーが表示されます。