使用 Vuetify/Flexbox 滚动 div 布局

Question

一旦我使用 Angular 材质（以及 flexbox）设置了 UI，如下所示：

两个div在父容器中。我真正喜欢的布局是容器的高度由第一个 div 决定（隐含地，通过最大宽度和缩放比例），第二个 div 尊重该高度并创建一个滚动对于任何溢出。

我正在用 VueJS 和 Vuetify 重写应用程序，但我无法翻译旧布局。我尝试对原始 CSS 进行逆向工程，但 Angular Material 创建的结构使这变得困难。

这是我最接近的一次，但滚动区域仍然溢出到容器外：

    <v-container fluid>
        <v-layout v-bind="layout">
            <v-flex md8 sm12 id="mapContainer">
                <map-phase-viewer :game="game" :phases="phases"></map-phase-viewer>
            </v-flex>
            <v-flex fluid id="gameToolsContainer" class="elevation-1">
                <div style="overflow-y: scroll;">
                    <v-list subheader v-if="game.Started" dense>
                        <div v-for="power in variant.Nations" :key="power + 'UnitSection'">
                    <v-subheader class="nationSubheader">{{power}}</v-subheader>
                    <province-list-item
                        v-for="unit in getCurrentPhase().Units"
                        v-if="unit.Unit.Nation === power"
                        :key="unit.Province"
                        :unit="unit">
                    </province-list-item>
                </div>
                    </v-list>
                </div>
            </v-flex>
        </v-layout>
    </v-container>

使用 Vuetify 甚至 raw CSS，实现此布局所需的最小结构是什么？为简单起见，请忽略您在原始文件中看到的选项卡。

Answer 1

Here is the rough layout from the original codepen 您在 discord 中发帖。

我会看看 Angular Material 应用程序（使用开发工具）中发生了什么，看看你是否可以将其中的一些 css 转移到你的 vuetify 应用程序中。

需要注意的一件事是您有两个元素的 ID mapContainer，这导致了一些奇怪的溢出问题，直到我弄清楚发生了什么。

受此 Whosebug 答案的启发：

使用 Vuetify/Flexbox 滚动 div 布局

Scrolling div layout with Vuetify/Flexbox

css

flexbox

vuetify.js