melkayam

# January 12, 2018 at 8:55 am

Hey,

There is something i dont understand about flex.

Im using react on an electron project, i am using a libary called react-list. which render a list..
If i want a scroll, i need to wrap react-list with a div with overflow:auto. however i also need to give height to the div, unless he just goes to the end and the scroll has no effect.

I work with flexbox, so i dont want to give fixed height in PX, so i wrap the who thing in a flex container and gave the div wrapper a flex property of 1 –

In that case the list just grew crazy and the scroll didnt have any effect, but when i added flex-basis: 1px; it suddenly became perfect (the list height was limited to the screen height and the scroll worked fine)

So I wanted to undertand why it works like that, why the flex:1; don’t do the job? and why i need to add the flex-basis?

Beverleyh

# January 13, 2018 at 12:49 am

If you’d like someone to comment on your code, you should provide a demo in CodePen. It’s hard to decipher a description and visualise theoretical HTML and CSS.

melkayam

# January 13, 2018 at 1:38 am

Hey,

Thaks for the replay!

I actually wrote the code in codePen: https://codepen.io/melkayam92/pen/Lerpqo

but the wierd thing that there it’s working as expected… but you can get the idea from the code there.

In my case, with react-list instead of the table i created there, if i put flex: 1 the list goes beyond and make the whole screen scrollable not only it’s own frame.