How can I stop ReactGridLayout elements from resizing when the containing window is resized?

I want to be able to expand the size of the window, and the datagrid, to cover two monitors, so the user can move elements around freely and resize them manually as need be, but I do not want the elements themselves to change in size automatically. I want them to maintain a fixed size on window resize.

I've included a demo function trying to illustrate an approach I was trying. I thought if I made both the number of columns and the number of columns each element takes up dependent on the width of the window/grid as it expands, the size of the element would remain the same, but that is not how it is working out. The elements still stretch to fill the space.

import React from "react"; import GridLayout, { WidthProvider } from "react-grid-layout"; import GridELement1 from './GridELement1.jsx'; import GridELement2 from './GridELement2.jsx'; function Workspace() { const TestGridLayout = WidthProvider(GridLayout); let multiplier = Math.ceil(window.innerWidth/1000); window.addEventListener("resize", function() { multiplier = Math.ceil(window.innerWidth/1000); )}; return ( <> <TestGridLayout className="workspace" cols={500*multiplier} rowHeight="30" autoSize={true} > <div key="a" dataGrid={{ x: 0, y: 0, w: 460 * multiplier, h: 9, minH: 2, maxH: 20, isResizeable: true, resizeHandles:["s"] }} > <GridELement1/> </div> <div key="b" dataGrid={{ x: 460 * multiplier, y: 0, w: 550 * multiplier, h: 9, minH: 2, maxH: 20, isResizeable: true, resizeHandles:["s"] }} > <GridElement2/> </div> </TestGridLayout> </> ) } export default Workspace;