html - 如何显示内容和侧边栏？

Question

我在 React 语义中添加了侧边栏，但是 Sidebar.Pusher 中的内容即使在滚动后也没有完全显示，它没有正确显示。

<Sidebar.Pusher dimmed={visible}>
            <Segment basic className={styles.content}>
              <DashBoard/>
            </Segment>
          </Sidebar.Pusher>

完整代码:

export default class NavBar extends Component {
  state = { visible: false }

  handleHideClick = () => this.setState({ visible: false })
  handleShowClick = () => this.setState({ visible: true })
  handleSidebarHide = () => this.setState({ visible: false })

  render() {
    const { visible } = this.state

    return (
      <div>
      <Grid>
      <Grid.Row>
        <Grid.Column width={16}>
            <Icon name='content' disabled={visible} onClick={this.handleShowClick} size='big'/>
            <div className={styles.header}>
              <img
                src={require('../images/rccg_transparent_logo.png')}
                width="80"
                height="80"
                alt="logo"
              />
              <Header as="h2" className={styles.headerTitle}>
                RCCG Europe Mainland Region 3
              </Header>
            </div>
          </Grid.Column>
      </Grid.Row>
      </Grid>
        <Sidebar.Pushable as={Segment} className={styles.content} >
          <Sidebar
            as={Menu}
            animation='overlay'
            icon='labeled'
            inverted
            onHide={this.handleSidebarHide}
            vertical
            visible={visible}
            width='thin'
          >
            <Menu.Item as='a'>
              <Icon name='home' />
              Home
            </Menu.Item>
            <Menu.Item as='a'>
              <Icon name='gamepad' />
              Games
            </Menu.Item>
            <Menu.Item as='a'>
              <Icon name='camera' />
              Channels
            </Menu.Item>
          </Sidebar>

          <Sidebar.Pusher dimmed={visible}>
            <Segment basic className={styles.content}>
              <DashBoard/>
            </Segment>
          </Sidebar.Pusher>
        </Sidebar.Pushable>
      </div>
    )
  }
}

CSS:

.header {
    display: flex;
    margin-left: 500px;
    border-bottom: 2px;
    border-bottom-color: black;
}

.headerTitle {
    float: left;
    justify-content: center;
    margin-left: 50px !important;
}

.content {
    min-height: 100vh;
    overflow: scroll;
}

在下面的屏幕截图中，图表显示不正确，只有一半部分可见，这是为什么？截图:

Answer 1

您需要更改仪表板的溢出属性。溢出:滚动