使 flexbox 容器可垂直滚动

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;">

然后滚动将起作用。