# Canvas not resizing as expected, overflowing parent and not fitting the screen

**URL:** <https://forum.babylonjs.com/t/canvas-not-resizing-as-expected-overflowing-parent-and-not-fitting-the-screen/25577>\
**Category:** Questions\
**Created:** [November 26, 2021, 9:07am UTC](https://forum.babylonjs.com/t/canvas-not-resizing-as-expected-overflowing-parent-and-not-fitting-the-screen/25577 "2021-11-26T09:07:23Z")\
**Posts on this page:** 2\
**Page:** 1

<div class="post-metadata">

**Author:** ![douglasg14b](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/douglasg14b/32/19926_2.png) [@douglasg14b](https://forum.babylonjs.com/u/douglasg14b)\
**Post date:** [November 26, 2021, 9:07am UTC](https://forum.babylonjs.com/t/canvas-not-resizing-as-expected-overflowing-parent-and-not-fitting-the-screen/25577/1 "2021-11-26T09:07:23Z")

</div>

The canvas size grows out of the bounds of it’s parent container, like it’s enforcing an aspect ratio. I don’t get this behavior with the

The canvas fails to resize consistently with the window:

- If the window is expanded vertically, the canvas resizes to fill. If the window is then shrunk vertically the canvas doesn’t resize to shrink with it, overflowing it’s parent
- If the window width is increased the canvas expands vertically, overflowing it’s parent

Video showing how it doesn’t resize to fit the parent, and how it overflows it: [https://i.imgur.com/ncGCTOZ.mp4](https://i.imgur.com/ncGCTOZ.mp4)

**My Code:**

```auto
    var engine = new BABYLON.Engine(canvas, true, { preserveDrawingBuffer: true, stencil: true, disableWebGL2Support: false });

    const scene = new BABYLON.Scene(engine);

    //... camera & light stuff ...

    canvas.onresize = function() {
        engine.resize();
    };
    window.onresize = function() {
        engine.resize();
    };

```

```auto
    <q-page style="max-height: calc(100vh - 32px)"> <!-- Has a matching min-height -->
        <canvas ref="renderCanvas" class="render-canvas" width="100%" height="100%"></canvas>
    </q-page>

```

```css
    .render-canvas {
        min-height: inherit;
        width: 100%;
    }

```

```json
    "babylonjs": "^4.2.0",
    "babylonjs-gui": "^4.2.0",
    "babylonjs-loaders": "^4.2.0",
    "babylonjs-materials": "^4.2.0",
    "babylonjs-post-process": "^4.2.0",
    "babylonjs-serializers": "^4.2.0",

```

How can I get the size to just fit the parent element?

---

<div class="post-metadata">

**Author:** ![douglasg14b](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/douglasg14b/32/19926_2.png) [@douglasg14b](https://forum.babylonjs.com/u/douglasg14b)\
**Post date:** [November 26, 2021, 9:17am UTC](https://forum.babylonjs.com/t/canvas-not-resizing-as-expected-overflowing-parent-and-not-fitting-the-screen/25577/2 "2021-11-26T09:17:06Z")

</div>

Well, guess I’m self answering this one. The canvas needs css setting it’s height (ie. `100%`)