CODEWITHSUNDEEP
htmlcssreactjsflexbox
Bucky
Bucky

Reputation: 1206

Making a flexbox container vertically scrollable

I'm working on a react app. Pretty much new in web designing. I have completed a sidebar layout but don't know how to make the flexbo scrollable..

I have tried adding

overflowY to scroll

overflow to scroll

overflow to auto

But nothing worked for me.

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>
    );
  }

Need Help :(

Upvotes: 0

Views: 67

Answers (1)

he77kat_
he77kat_

Reputation: 493

You have to give the div with display: flex a fixed height that's shorter than the content within would normally be on its own. So like:

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

Then scrolling will work.

Upvotes: 1

Related Questions