Создание контейнера 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

Вы должны присвоить div с display: flex фиксированную высоту, которая короче, чем содержимое внутри, как правило, само по себе.Например:

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

Тогда будет работать прокрутка.