PIXI View Overflowing Parent Flex Container

[peterje]

I am building a Scratch-like application in Vue with PIXI as my rendering engine, but I am having trouble getting my WebGL view to stay within its parent container.

 

 

Here is what my web page looks like before I add the canvas. The empty white area with id=canvasWrapper is where I want to put my canvas.

<template>
    <v-container class="pa-0 flex-grow-1 d-flex flex-column">
        <v-sheet
            rounded
            color="white"
            class="flex-grow-0 mb-2 py-1 d-flex align-center justify-space-around"
        >
            <v-btn @click="gameStart" :disabled="this.gameStarted" color="success">
                <v-icon>mdi-play</v-icon>
            </v-btn>
            <v-btn @click="gameStop" :disabled="!this.gameStarted" color="error">
                <v-icon>mdi-stop</v-icon>
            </v-btn>
        </v-sheet>
        <v-sheet id="canvasWrapper" class="flex-grow-1">
             <!-- The canvas will go here! -->
        </v-sheet>
    </v-container>
</template>

The classes like 'flex-grow-1' are provided by Vue if you are not familiar, but they provide the same functionality as the equivalent CSS. In this case, "flex-grow-1" allow the v-sheet to fill the rest of the area.

 

So far this looks good, but after adding a canvas and linking it to PIXI it looks like this:

 

 

I attach my PIXI instance with the following code

const cvs = document.getElementById('canvas')
const wrapper = document.getElementById('canvasWrapper')
this.app = new PIXI.Application({
    view: cvs,
    width: wrapper.clientWidth,
    height: wrapper.clientHeight,
    transparent: true,
    roundPixels: false,
})

To my understanding, this should set the size of the view to the size of the canvasWrapper. However, this is causing the canvas wrapper to grow.

What is the proper solution to this seemingly basic task?