CODEWITHSUNDEEP
cssreactjsflexboxag-gridag-grid-react
Roy Wang
Roy Wang

Reputation: 11270

Flexbox make each element fill screen width

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>
  );
};

Upvotes: 1

Views: 66

Answers (1)

Mario Perez
Mario Perez

Reputation: 3367

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

Upvotes: 1

Related Questions