如何避免父母在使用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