Как исправить размер v-контента

Question

У меня есть 2 html-компонента, которые должны быть фиксированного размера. 1 - это v-list, другой - визуальный редактор. Если v-list становится слишком большим, на странице появляется полоса прокрутки. Чтобы решить эту проблему, мне нужно установить v-list max-height: 100%, но это не работает, потому что v-content увеличивается в соответствии с содержимым внутри него. Как установить v-content max height в качестве начальной высоты страницы (с правильным заполнением), а не увеличивать или уменьшать ее, когда содержимое находится внутри нее?

v-контент с отступом

Плохое переполнение v-контента

       <v-content class="main-content">
            <router-view/>
        </v-content>

<v-container pa-0 fluid fill-height>
        <v-layout column>
            <v-toolbar height="40px" color="white" flat>
                <v-btn to="/gitremote" depressed color="#00b259" class="white--text" small>Open</v-btn>
            </v-toolbar>

            <v-toolbar height="33px" color="white" flat>
                <v-breadcrumbs :items="breadcrumbs" divider="/"></v-breadcrumbs>
            </v-toolbar>

            <v-layout row>
                <v-flex xs2>
                    <v-card color="white" height="100%">
                        <v-list two-line>
                            <v-list-tile v-for="listitem in currentDirectoryItems" :key="listitem" avatar
                                         @click="navigateTo(listitem.itemType, listitem.itemId, listitem.name)">
                                <v-list-tile-avatar>
                                    <v-icon>{{listitem.icon}}</v-icon>
                                </v-list-tile-avatar>
                                <v-list-tile-content>
                                    <v-list-tile-title>{{listitem}}</v-list-tile-title>
                                    <v-list-tile-sub-title>{{listitem.subtitle}}</v-list-tile-sub-title>
                                </v-list-tile-content>
                                <v-list-tile-action>
                                    <!-- <CommandMenu
                                      v-bind:listItem="listitem"
                                      v-bind:commandsObject="gitRepoItemCommands"
                                      /> -->
                                </v-list-tile-action>
                            </v-list-tile>
                        </v-list>
                    </v-card>
                </v-flex>
                <v-flex>
                    <v-card>
                        EDITOR!!!!1
                    </v-card>
                </v-flex>
            </v-layout>
        </v-layout>
    </v-container>

Answer 1

Один из вариантов заключается в «жестком кодировании» суммы высот верхнего и нижнего колонтитулов, чтобы получить контейнер:

 max-height: calc(100vh - 200px);
 overflow-y: auto;

, где 200px - сумма высот верхнего и нижнего колонтитулов.

Если ваш верхний и / или нижний колонтитулы имеют переменную высоту, другой вариант - обернуть их все во элемент flexbox, ограниченный значением height: 100vh, имеющим flex-direction: column.

Вот суть этого:

.wrapper {
  max-height: 100vh;
  display: flex;
  flex-direction: column;
}

.wrapper>.header,
.wrapper>.footer {
  flex-grow: 0;
  flex-shrink: 0;
}

.wrapper>.content {
  flex-grow: 1;
  overflow-y: auto;
}
.test {
  height: 200vh;
}
/* the rest are styling details */
body {
  margin: 0;
}
.wrapper > * {
  padding: .5rem;
}
.wrapper > .header,
.wrapper > .footer {
  background-color: #eee;
  box-shadow: 0 0 5px 0 rgba(0,0,0,.2), 0 0 2px 0 rgba(0,0,0,.14), 0 0 1px -2px rgba(0,0,0,.12)
}
* {
  box-sizing: border-box;
}

<div class="wrapper">
  <div class="header">header<br>more header</div>
  <div class="content">
    <div class="test">some tall content...</div>
  </div>
  <div class="footer">footer<br>more footer<br>even more footer</div>
</div>

---

И, очевидно, у вас также есть возможность разместить .header и .footer с position:absolute (или fixed), что я не рекомендую, так как вам нужно динамически обновлять верхний и нижний отступы .content, чтобы соответствовать высоте верхнего и нижнего колонтитула.Другая проблема, связанная с этим последним решением, заключается в том, что вы теряете доступ к частям полосы прокрутки, покрытым верхним и нижним колонтитулами, что очень плохо для доступности.

---

Примечание: Предоставьте runnable минимальный воспроизводимый пример (здесь или в codesandbox.io), и я помогу применить решение flexbox к вашему делу.