Question

我正在开发一个反应应用程序。在网页设计方面几乎全新。我已完成侧边栏布局，但不知道如何使flexbo可滚动..

我尝试过添加

overflowY滚动

溢出滚动

溢出到自动

但没有任何对我有用。

render() {
    return (
        <div style={{display:"flex", alignItems:'center', flexDirection:'column', padding:10,   flex:1,  overflowY: 'scroll' }}>
            <Avatar alt="Bucky" style={{height:100, width:100 }} src="image" />
            <b><p style={{fontSize:20, marginTop:15, textAlign:'center'}}>Bucky</p></b>
            <p style={{fontSize:18, marginTop:5, textAlign:'center', color: '#616161'}}>@bucky</p>
            <p style={{fontSize:18, marginTop:15, textAlign:'center'}}>Bio Bio.</p>
            <Button variant="raised" color="secondary" style={{marginTop:15, marginBottom:20,backgroundColor:'#1A237E'}}>
               Message
            </Button>
            <TopicCard />
            <TopicCard />
            <TopicCard />

        </div>
    );
  }

需要帮助:(

Answer 1

你必须为display: flex赋予一个固定高度的div，该高度比通常自己的内容短。所以喜欢：

<div style="display: flex; height: 40px; overflow-y:scroll;">

然后滚动就可以了。

使flexbox容器可垂直滚动

1 个答案: