Make div width fill the remaining space - html

Question

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

Answer 1

on your main section you have:
height: 100vh;
that means 100% of the height.
So u can do something similar with the width:
for your sidebar:
width: 20vw;
then, for your main:
width: 80vw;
and problem solved

Answer 2

Try display: flex for parent component then play with flex-shrink or flex-grow. To set width use percents then vw (100vw is sometimes wider than the viewable area (because scrollbars))