如何避免父母在使用overflow-y時顯示滾動條：在子項上滾動

Question

我想在class .height的div上顯示垂直滾動條。

滾動條已成功顯示，但問題是父母也顯示滾動條。 我想阻止這種情況。只有孩子顯示滾動條。

HTML：

<div id="app"> 
    <v-app> 
    <main> 
     <v-content> 
     <v-container fluid grid-list-xs> 
      <v-layout row wrap> 
      <v-flex xs6> 
       <v-toolbar></v-toolbar> 
       <div class="height">THIS CAN BE A VERY LONG TEXT</div> 
      </v-flex> 
      <v-flex xs2></v-flex> 
      <v-flex xs4></v-flex> 
      </v-layout> 
     </v-container> 
     </v-content> 
    </main> 
    </v-app> 
</div> 

CSS

.container, .layout { 
    height: 100%; 
} 

.xs6 { 
    display: flex; 
    flex-direction: column; 
} 

.container, .layout { 
    height: 100%; 
} 

.xs6 { 
    display: flex; 
    flex-direction: column; 
} 

.height { 
    flex: 1 1 auto; 
    border: 1px solid orange; 
    overflow-y: scroll; 
} 

所以我怎麼能阻止顯示滾動條的家長嗎？

https://codepen.io/anon/pen/bYGeMN

Answer 1

的html元件具有overflow-y: scroll。

一旦你刪除它，剩下的唯一垂直滾動條就在類height的元素上。

revised codepen