html - 使用 overflow-y : scroll on children 时如何避免父级显示滚动条

Question

我想在 .height 类的 div 上显示垂直滚动条。

滚动条显示成功，但问题是父级也显示滚动条。我想阻止这种情况。只有 child 显示显示滚动条。

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