resizing canvas when reducing window size

[eellio]

I am really enjoying react-three-fiber. I am still learning all it has to offer, so this may be a newb question…

I am trying to set up a layout where a CSS grid fills the window and the RTF Canvas covers a couple cells in the grid, with the canvas automatically stretching and shrinking when the window resizes.

The grid and cell divs containing the canvas appear to be correctly resizing with the window, and the canvas resizes to match when expanding the window. However, the canvas seems to stick at its largest size when shrinking the window. Swapping in a simple div for the canvas, the div does shrink as expected, so I am somewhat confident in the html/css surrounding the RTF Canvas.

I'm not sure if my CSS is suspect, or if I need to do more to coax the canvas to resize downward, or if something else is going on.

I have it boiled down to an example here:
https://codesandbox.io/s/rtf-resize-test-xitip?file=/src/index.js

[drcmda]

i think this is related to grids, whose contents are allowed to stretch them out of bounds. the yellow div was empty on the other hand. see: https://stackoverflow.com/questions/43311943/prevent-content-from-expanding-grid-items

  let gridStyle = {
    height: '100%',
    width: '100%',
    display: 'grid', // 3 x 3 grid
    gridTemplateColumns: '50px auto 50px',
    gridTemplateRows: '50px minmax(0, 1fr) 50px',
    backgroundColor: '#3a6', // green grid background
    textAlign: 'center',
    minHeight: 0,  /* NEW */
    minWidth: 0,   /* NEW */
  }
  let containerStyle = {
    gridColumn: '2/3', // middle column
    gridRow: '2/4', // bottom 2 rows
    overflow: "hidden",  /* NEW */
    minWidth: 0      /* NEW */
  }

[eellio]

voila! thank you so much. a co-worker also pointed me to this explanation of grid blowout https://css-tricks.com/preventing-a-grid-blowout/