Make div width fill the remaining space – Html

I have left and right sidebar, then i intended to make some sort of content right at the center of it.
But when i make a new js file and define some styling width for it, i realize that my main content width just ignore the width of both the sidebar and go underneath it.

So my question is, how can i make the main content only have width based on the remaining space of the page?

Router:

import React from 'react'
import LeftSidebar from './components/sidebar/LeftSidebar'
import Main from './Pages/Main'
import RightSidebar from './components/sidebar/RightSidebar'

import { BrowserRouter, Route, Routes } from 'react-router-dom'

import "../src/styles/global.css"
const App = () => {
  return (

    <BrowserRouter>
      <>
        <LeftSidebar />
        <RightSidebar />

        <Routes>
            <Route path='/' element={<Main />}/>
        </Routes>
      </>
    </BrowserRouter>
   
  )
}

export default App

Main Content js file:

import React from 'react'
import SearchBox from '../components/search/Search'
import Styles from "../../src/styles/Main.module.css"
const Main = () => {
  return (
   <div className={Styles.mainSection}>
    <SearchBox />
   </div>
  )
}

export default Main

Main Content css file:

.mainSection {
    width: auto;
    background-color: #1e1e1e;
    height: 100vh;
    overflow-x: hidden;
}

I want the main content only have width of the remaining space in my page