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
Unknown User•2y ago
Message Not Public
Sign In & Join Server To View
stealthy
stealthyOP•2y ago
can you explain
.parent {
background: white;
margin: 0 auto;
height: 100dvh;
width: 85vw;

template-grid-row: auto / 1fr;
template-grid-colum: 1fr;
display: grid;
gap: 1rem;
}
.parent {
background: white;
margin: 0 auto;
height: 100dvh;
width: 85vw;

template-grid-row: auto / 1fr;
template-grid-colum: 1fr;
display: grid;
gap: 1rem;
}
rishit
rishit•2y ago
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
Mannix
Mannix•2y ago
are you sure about that to me they look like invalid properties 😉
Unknown User
Unknown User•2y ago
Message Not Public
Sign In & Join Server To View
stealthy
stealthyOP•2y ago
let me check and tell
Mannix
Mannix•2y ago
there is no reason to use grid at all it worked without it 🙂
Unknown User
Unknown User•2y ago
Message Not Public
Sign In & Join Server To View
Mannix
Mannix•2y ago
sorry specifying row and cols is unnecessary that is what i meant 🙂
Unknown User
Unknown User•2y ago
Message Not Public
Sign In & Join Server To View
stealthy
stealthyOP•2y ago
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
Unknown User•2y ago
Message Not Public
Sign In & Join Server To View
stealthy
stealthyOP•2y ago
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
Unknown User•2y ago
Message Not Public
Sign In & Join Server To View
stealthy
stealthyOP•2y ago
i have to practice more on grid
Unknown User
Unknown User•2y ago
Message Not Public
Sign In & Join Server To View
stealthy
stealthyOP•2y ago
sure i will thanks @Kam Banwait, btw awesome nickname suits the developer
Unknown User
Unknown User•2y ago
Message Not Public
Sign In & Join Server To View
stealthy
stealthyOP•2y ago
Haha
Want results from more Discord servers?
Add your server