Dynamic overflow scroll effect
so I have two sections in a parent , first section has headings and paragraph, second section has no of items, this second section should be scrollable and it should have a max -height of remaining space of the parent. how to achieve that .https://codepen.io/naveen570/pen/NWLWZaE , code pen for reference.
19 Replies
Unknown User•2y ago
Message Not Public
Sign In & Join Server To View
can you explain
so basically here grid is used to set height of top section to auto which is content height and rest to 1fr which means remaining space
are you sure about that to me they look like invalid properties 😉
Unknown User•2y ago
Message Not Public
Sign In & Join Server To View
let me check and tell
there is no reason to use grid at all it worked without it 🙂
Unknown User•2y ago
Message Not Public
Sign In & Join Server To View
sorry specifying row and cols is unnecessary that is what i meant 🙂
Unknown User•2y ago
Message Not Public
Sign In & Join Server To View
so from what i understand, 1fr will take remaining space, so when we set overflow y auto as soon as child elements crosses that space, it will start scrolling inside, no need to give definitive height here
did i get it right?
Unknown User•2y ago
Message Not Public
Sign In & Join Server To View
oh here i was thinking how should i give finite height when i need dynamic height, didn't know we could do that with grid
yes i tried removing
scroll went away
Unknown User•2y ago
Message Not Public
Sign In & Join Server To View
i have to practice more on grid
Unknown User•2y ago
Message Not Public
Sign In & Join Server To View
sure
i will
thanks @Kam Banwait, btw awesome nickname suits the developer
Unknown User•2y ago
Message Not Public
Sign In & Join Server To View
Haha