Как мне сделать V-Flex придерживаться дна? - PullRequest
Новая
       44

Как мне сделать V-Flex придерживаться дна?

0 голосов
/ 14 апреля 2020

У меня есть av-макет и два v-flex, как мне заставить flex 2 придерживаться дна, даже если содержимое flex 1 растет (и имеет полосу прокрутки)? 

     <v-container>
      <v-layout column fill-height>
        <v-flex
          grow
          class="white--text green darken-3"
        >
            <v-card-text>
              content 1
            </v-card-text>
            <v-card-text>
              content 2
            </v-card-text>
        </v-flex>
        <v-flex
          shrink
          align-self-end
          class="white--text blue darken-3"
        >   
            <v-card-text>
              I should stay here
            </v-card-text>
        </v-flex>
      </v-layout>
    </v-container>

enter image description here

https://codepen.io/adatdeltax/pen/MWaapYR?editors=1000

Я новичок в vuetify и выше codepen это то, что я пробовал до сих пор, есть ли способ сделать flex 2 придерживается дна и делает flex 1 прокручиваемым с большим количеством контента.

1 Ответ

0 голосов
/ 14 апреля 2020

Предполагая, что все упаковано в v-app, вам нужно добавить помощника CSS в Vuetify 1.5. Используйте класс flex на <v-flex> ... 

.application--wrap {
    height: 100vh !important;
}

.overflow-auto {
    overflow: auto;
}


<v-app>
    <v-container class="fill-height">
      <v-layout column class="fill-height">
        <v-flex
          class="white--text green flex darken-3 overflow-auto"
        >
            <v-card v-for="i in 10" class="ma-3">
                <v-card-text>
                  I should occupy rest of the available space
                </v-card-text>
            </v-card>
        </v-flex>
        <v-flex class="white--text blue flex shrink darken-3">   
            <v-card-text>
              Footer
            </v-card-text>
        </v-flex>
      </v-layout>
    </v-container>
</v-app>

https://codeply.com/p/wKnZ6vFIBg

...