Kevin Powell - Community•16mo ago

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.

Naveen kumar A M

CodePen

overflow-scroll

...

19 Replies

Unknown User•16mo ago

Message Not Public

stealthy•16mo 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•16mo 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•16mo ago

are you sure about that to me they look like invalid properties 😉

Unknown User•16mo ago

Message Not Public

stealthy•16mo ago

let me check and tell

Mannix•16mo ago

there is no reason to use grid at all it worked without it 🙂

Unknown User•16mo ago

Message Not Public

Mannix•16mo ago

sorry specifying row and cols is unnecessary that is what i meant 🙂

Unknown User•16mo ago

Message Not Public

stealthy•16mo 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•16mo ago

Message Not Public

stealthy•16mo 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•16mo ago

Message Not Public

stealthy•16mo ago

i have to practice more on grid

Unknown User•16mo ago

Message Not Public

stealthy•16mo ago

sure i will thanks @Kam Banwait, btw awesome nickname suits the developer

Unknown User•16mo ago

Message Not Public

stealthy•16mo ago

Haha

Gaming

Programming

Dynamic overflow scroll effect