Forums

Give help. Get help.

  • # 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?

    # 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.

    # 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.

Viewing 3 posts - 1 through 3 (of 3 total)

You must be logged in to reply to this topic.

icon-anchoricon-closeicon-emailicon-linkicon-logo-staricon-menuicon-nav-guideicon-searchicon-staricon-tag