Question

使用Angular Material（以及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甚至原始CSS，实现此布局所需的最小结构是什么？为简单起见，请忽略您在原始文件中看到的标签。

Answer 1

Here is the rough layout来自您在discord中发布的original codepen。

我会看一下Angular Material应用程序中的内容（使用devtools），看看你是否可以将一些css转移到你的vuetify应用程序中。

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

受此stackoverflow答案的启发：https://stackoverflow.com/a/34194693/2074736

使用Vuetify / Flexbox滚动div布局

1 个答案: