Переполнение ящика в интерфейсе материала вызывает прокрутку на теле

Question

Я использую вырезанный под ящиком панели приложения холст в качестве основного содержимого. У меня в ящике три разборные карты, и когда по умолчанию все они открыты, на теле отображается вертикальная полоса прокрутки, а под элементом html с элементом body отображается пустое пространство. Если вы закроете все три карты, свиток исчезнет. Если вы снова откроете карты, свиток не появится. Эта проблема возникает только тогда, когда страница загружена с открытыми всеми тремя картами.

Наше краткосрочное решение состоит в том, чтобы загрузить страницу только с двумя открытыми карточками, но я хочу отметить, что даже при двух открытых карточках содержимое ящика выходит за пределы окна без прокрутки. CSS для ящика тоже не должен быть проблемой. Кто-нибудь еще сталкивался с этой проблемой?

  drawerPaper: {
    position: 'relative',
    width: 400,
    overflowX: 'hidden',
    overflowY: 'hidden',
    '&:hover': {
      overflowY: 'auto',
    },
    '&::-webkit-scrollbar': {
      display: 'none',
    },
  },



   <MuiThemeProvider theme={this.state.useDarkTheme ? darkTheme : lightTheme}>
    <div className={classes.root}>
      <AppBar position="absolute" className={classes.appBar}>
        <Toolbar>
          <div className={classes.flex}>
            <Typography className={classes.headerTextColor} variant="title">
              Title
            </Typography>
            {sealedBy}
          </div>
          <HeaderTools />
          <Tooltip id="toggle-icon" title="Toggle light/dark theme">
            <IconButton className={classes.headerTextColor} onClick={this.toggleTheme}>
              <BrightnessMediumIcon />
            </IconButton>
          </Tooltip>
        </Toolbar>
        {spinner}
      </AppBar>
      <Drawer
        variant="permanent"
        classes={{
          paper: classes.drawerPaper,
        }}
      >
        <div className={classes.fixedWidth}>
          <div className={classes.toolbar} />
          <DocumentTools />
          <SealingTools />
          <AnnotationTools />
        </div>
      </Drawer>
      <main className={classes.content}>
        <div className={classes.toolbar} />
        <DrawingCanvas />
      </main>
    </div>
  </MuiThemeProvider>

Answer 1

Вам необходимо добавить height: 100% свойство css для некоторых компонентов контейнера, а к стилям drawerPaper тоже нужно добавить.

У меня есть настройка, она работает, но, вероятно, зависит от компонентов контейнера:

drawerPaper: {
    width: 250,
    overflow: "auto",
    height: "100%",
    [theme.breakpoints.up("md")]: {
      overflow: "auto",
      width: drawerWidth,
      position: "relative",
      height: "100%"
    }
  }