'ListItem Fill List And Overflow

I want to have a ListItem that vertically fills the list completely, and sometimes overflows it.

That means I need access to the height of the empty space in the list. It would be the minHeight, and sometimes I would add some extra height to it. How do I have access to that?

I tried display=flex and flexDirection=column on the List and then flexGrow: 1 on the ListItem and it did fill the empty space of the list, but never overflowed as I wanted.

Any suggestions?

javascriptcssreactjstypescriptmaterial-ui


Solution 1:[1]

I think you can handle this issue in pure CSS. You should add these styles to your list element:

height: auto;
overflow-y: auto;

then when your list fills, it scrolls automatically

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 Alireza Amini

Related Questions