Canvas grid squashed when initially loaded, auto adjust to be sqaure grid after resizing the webpage window

When the website is initially loaded, the grid is squashed squashed grid

After resizing the webpage window it auto fixes the problem squared grid, but the grid extends over the webpage

After going into the css, the box-sizing is inherent. If I delete the box-sizing attribute, the grid is fixed.

The following is the css code for the grid.

#renderContainer {
    z-index: 0;
    position: absolute;
    left: 0px;
    top: 0px;
    width: 100%;
    height: 100%;

* {
    padding: 0;
    margin: 0;
}

*, ::before, ::after {
    background-repeat: no-repeat;
    box-sizing: inherit;

The source code can be find on https://github.com/CIDARLAB/3DuF/blob/webpack-build/src/components/Visualiser.vue

The styling code can be find on https://github.com/CIDARLAB/3DuF/blob/webpack-build/public/modified.css

The html can be find on https://github.com/CIDARLAB/3DuF/blob/webpack-build/public/index2.html

Anyone know why this is happening?

Thank you!