CODEWITHSUNDEEP
htmlcssflexbox
Steve
Steve

Reputation: 37

How to avoid parent from showing scrollbars when using overflow-y: scroll on children

I want to display vertical scrollbars on the div with class .height.

The scrollbars are successfully displayed, but the problem is that also the parent shows scrollbars. I want to prevent that. Only the children show display scrollbars.

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;
}

so how can I stop the parent from showing scrollbars?

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

Upvotes: 2

Views: 45

Answers (1)

Michael Benjamin
Michael Benjamin

Reputation: 371869

The html element has overflow-y: scroll.

Once you remove that, the only vertical scrollbar remaining is on the element with class height.

revised codepen

Upvotes: 2

Related Questions