Scrolling div layout with Vuetify/Flexbox

Question

Once I set up a UI using Angular Material (and therefore flexbox), as seen below:

The two divs are in a parent container. What I really like about the layout is that the height of the container is dictated (implicitly, via max-width and scaling) by the first div, and the second div respects that height and creates a scroll for any overflow.

I'm rewriting the app in VueJS and Vuetify, and I just can't translate the old layout. I tried reverse engineering the original CSS but the structure created by Angular Material made that difficult.

This is the closest I've come, but the scroll area still overflows outside the container:

    <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>

Using either Vuetify or even raw CSS, what is the minimum structure needed to achieve this layout? For simplicity, disregard tabs you see in the original.

Kael Watts-Deuchar Kael Watts-Deuchar · Accepted Answer · 2017-10-27T11:04:25

Here is the rough layout from the original codepen you posted in discord.

I'd have a look at what's going on in the Angular Material app (use devtools) and see if you can transfer some of that css into your vuetify app.

One thing to note is that you had two elements with the id mapContainer, which was causing some weird overflow issues until I figured out what was going on.

Inspired by this stackoverflow answer: https://stackoverflow.com/a/34194693/2074736

Scrolling div layout with Vuetify/Flexbox

1 Answers