CODEWITHSUNDEEP
cssflexbox
Steve
Steve

Reputation: 37

How to make a div take the remaining height of parent container

I know this has been asked before, but I could not find any solution that works.

I need the div with class .height to take the remaining height of the parent

<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"></div>
            </v-flex>
            <v-flex xs2></v-flex>
            <v-flex xs4></v-flex>
          </v-layout>
        </v-container>
      </v-content>
    </main>
  </v-app>
</div>

CSS

.height {
  display: flex;
  flex-flow: column;
  height: 100%;
  border: 1px solid orange;
}

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

Why is not the display flex + height 100% working?

I'm using the Vuetify library to get a material design theme on VueJS, but I think this question is not related to VueJS but CSS.

Thanks in advance

Upvotes: 1

Views: 3695

Answers (1)

smnh
smnh

Reputation: 1745

You need to make sure that the v-container and v-layout will have their height set to 100%. Also, the display: flex and flex-flow: column need to be set on xs6 not the inner div:

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

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

.height {
  flex: 1 1 auto;
}

Upvotes: 1

Related Questions