Flexbox make each element fill screen width - css

Question

I have multiple AgGrid tables that should be displayed side-by-side, but each table should take up the width of the entire screen.
I accomplished this by setting width of the parent element to ${tables.length}00%, but is there a more elegant/pure .css way to accomplish this?
Codesandbox link: https://codesandbox.io/s/multi-grid-width-8jqurj
const App = () => {
const rowData = [
{ make: "Toyota", model: "Celica", price: 35000 },
{ make: "Ford", model: "Mondeo", price: 32000 },
{ make: "Porsche", model: "Boxter", price: 72000 }
];
const tables = [rowData, rowData];
return (
<div
className="ag-theme-alpine"
style={{
display: "flex",
width: `${tables.length}00%`
}}
>
{tables.map((data) => (
<div style={{ width: "100%", height: 400 }}>
<AgGridReact rowData={data}>
<AgGridColumn field="make" />
<AgGridColumn field="model" />
<AgGridColumn field="price" />
</AgGridReact>
</div>
))}
</div>
);
};

Answer 1

Updated Answer:
I've updated my snippet as follows
Add width "max-content" to the parent and width: 100vw to each child element
<div
className="ag-theme-alpine"
style={{
display: "flex",
width: "max-content"
}}
>
{tables.map((data) => (
<div style={{ width: "100vw", height: 400 }}>
<AgGridReact rowData={data}>
<AgGridColumn field="make" />
<AgGridColumn field="model" />
<AgGridColumn field="price" />
</AgGridReact>
</div>
))}
</div>
Updated Snippet: ttps://codesandbox.io/s/multi-grid-width-forked-rx7chu
ORIGINAL ANSWER: I tried you snippet with:
width: `${tables.length}00vw`
I made this change to ensure that I covered all the viewport/window width instead of 100% of the parent container
Heres a fork of your snippet https://codesandbox.io/s/multi-grid-width-forked-rx7chu