Problem with 100vh, content larger than my browser window - reactjs

Question

I need to make the content fit in the browser window, without showing the scroll bar, can someone help me?
I'm using Material-UI, follow the model in Sandbox.
screen
https://codesandbox.io/s/material-ui-grid-ylw6v?file=/src/App.js
Thanks for your help!

Answer 1

Try this css:
::-webkit-scrollbar {
display: none;
}

Answer 2

I managed to solve using the code posted on the link below.
https://github.com/mui-org/material-ui/issues/10739#issuecomment-817742141
Below is the code and the link in Sandbox.
import {
AppBar,
Box,
CssBaseline,
Grid,
IconButton,
makeStyles,
Toolbar,
Typography
} from "#material-ui/core";
import MenuIcon from "#material-ui/icons/Menu";
import "./styles.css";
const useStyles = makeStyles((theme) => {
/*
* This function creates a new object similar to `style`, but only keep
* `property` with the value set from `setNewValue`.
*
* For example given the `style`:
*
* const style = {
* minHeight: 56,
* '#media (min-width:0px) and (orientation: landscape)': { minHeight: 48 },
* '#media (min-width:600px)': { minHeight: 64 }
* }
*
* Then overrideExistingStyle(style, 'minHeight', (v) => v + 1) returns:
*
* {
* minHeight: 57,
* '#media (min-width:0px) and (orientation: landscape)': { minHeight: 49 },
* '#media (min-width:600px)': { minHeight: 65 }
* }
*
* We use overrideExistingStyel to dynamically compute the main content
* height. Since MUI AppBar minHeight depends on the screen size, We use
* overrideExistingStyel() to set the minHeight of the main content to (100vh
* - AppBar height).
*/
function overrideExistingStyle(style, property, setNewValue) {
return Object.fromEntries(
Object.entries(style)
.filter(([key, value]) => key === property || typeof value === "object")
.map(([key, value]) =>
typeof value === "object"
? [key, overrideExistingStyle(value, property, setNewValue)]
: [property, setNewValue(value)]
)
);
}
return {
main: {
display: "flex",
background: "#ccc",
...overrideExistingStyle(
theme.mixins.toolbar,
"minHeight",
(value) => `calc(100vh - ${value}px - (${theme.spacing(2)}px * 2))`
)
},
sidebar: {
width: 240,
background: "#F56638",
...overrideExistingStyle(
theme.mixins.toolbar,
"minHeight",
(value) => `calc(100vh - ${value}px)`
)
},
contentHeader: {
display: "flex",
background: "green",
height: theme.spacing(8)
},
box1: {
display: "flex",
background: "yellow",
...overrideExistingStyle(
theme.mixins.toolbar,
"minHeight",
(value) => `calc(100vh - ${value}px - (${theme.spacing(8)}px))`
)
},
box2: {
display: "flex",
background: "cyan",
...overrideExistingStyle(
theme.mixins.toolbar,
"minHeight",
(value) => `calc(100vh - ${value}px - (${theme.spacing(8)}px))`
)
},
box3: {
display: "flex",
background: "orange",
...overrideExistingStyle(
theme.mixins.toolbar,
"minHeight",
(value) => `calc(100vh - ${value}px - (${theme.spacing(8)}px))`
)
},
box4: {
display: "flex",
background: "gray",
...overrideExistingStyle(
theme.mixins.toolbar,
"minHeight",
(value) => `calc(100vh - ${value}px - (${theme.spacing(8)}px))`
)
}
};
});
export default function App() {
const classes = useStyles();
return (
<>
<CssBaseline />
<div className={classes.root}>
<AppBar position="static" color="primary">
<Toolbar>
<IconButton
edge="start"
className={classes.menuButton}
color="inherit"
aria-label="menu"
>
<MenuIcon />
</IconButton>
<Typography variant="h6" className={classes.title}>
News
</Typography>
</Toolbar>
</AppBar>
<div className={classes.main}>
<Box className={classes.sidebar}>
<h3>Sidebar</h3>
</Box>
<Grid container className={classes.content}>
<Grid item xs={12}>
<Box className={classes.contentHeader}>
<h3>Content Header</h3>
</Box>
</Grid>
<Grid item xs={2}>
<Box flex={1} overflow="auto" className={classes.box1}>
<h3>Box 1</h3>
</Box>
</Grid>
<Grid item xs={2}>
<Box flex={1} overflow="auto" className={classes.box2}>
<h3>Box 2</h3>
</Box>
</Grid>
<Grid item xs={2}>
<Box flex={1} overflow="auto" className={classes.box3}>
<h3>Box 3</h3>
</Box>
</Grid>
<Grid item xs={6}>
<Box flex={1} overflow="auto" className={classes.box4}>
<h3>Box 4</h3>
</Box>
</Grid>
</Grid>
</div>
</div>
</>
);
}
https://codesandbox.io/s/material-ui-grid-ajustado-qlmcw?file=/src/App.js