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!

CodePudding user response：

Try this css:

::-webkit-scrollbar {
  display: none;
}

CodePudding user response：

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