cg-container causes my sizes to be messed up

[Hugos68]

I've got a chessground setup and I'm trying to make a responsive board using grid but my board overflows my grid because for some reason the board is set to 960 x 960 pixels (see screenshot), can this be removed so the user can pick their own size, this is highly frustrating because settings height's and width's like that is very anti responsive

[niklasf]

Fwiw, the width and height of cg-container are based on the width given to cg-wrap.

[Hugos68]

Oh that's interesting because i set it to 100% width and 100% height but it somehow overflows my containers, I guess ill close the issue since I can adjust it but I'm having an extremely hard time making this board responsive. Like you can see the board doesn't really respect the parents boundaries but just procedes to overflow the container

[Disservin]

Im not sure how others have done it but i got a relatively responsive board with this approach: vue.js

mounted() {
    this.calculateSquareSize();
    window.addEventListener("resize", this.calculateSquareSize);
  },
  beforeDestroy() {
    window.removeEventListener("resize", this.calculateSquareSize);
  },

    calculateSquareSize() {
    //   let width = board_space.offsetWidth - 7; // for the numbers on the side of the ground
    //   width -= width % 8; // fix chrome alignment errors; https://github.com/ornicar/lila/pull/3881
    const boardSpace = this.$refs.boardSpace as HTMLElement;
    const boardWrap = document.querySelector(".cg-wrap") as HTMLElement;
    const rect = boardSpace.getBoundingClientRect();
    let size = Math.min(rect.width, rect.height);
    size -= 7; // adjust for borders and padding
    size -= size % 8; // ensure the size is a multiple of 8
    boardWrap.style.width = size + "px";
    boardWrap.style.height = size + "px";
    document.body.dispatchEvent(new Event("chessground.resize"));
    // idk why i need to do this again, but it works it also yeets the call stack.  
    // Fix to resize the board when using windows maximize button
    window.dispatchEvent(new Event("resize"));
  },

html

        <div class="board-space" ref="boardSpace">
          <div class="board" ref="board"></div>
        </div>

css

.board-space {
  flex: 1;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100%;
}