Overflow-y: auto does not work
Hi guys, I'm trying to make the
div scrollable inside a parent. I'm using overflow: hidden for parent and overflow-y: auto for the div but it does not work. Can anyone help me? I'm using tailwind css
6 Replies
It would be helpful if you could provide the actual code, not just a screen capture.
You need to define the height of the child element to be that of the parent (eg 100%) so that it knows when to start creating overflow.
overflow only overlows if there's something to overflow
Okay but to actually be helpful, The overflow does nothing right now because the div is allowed to become as tall as it wants. Since it's in a grid parent, you can give that grid a
grid-template-rows: 1fr (or grid-template-rows: minmax(0, 1fr) if that doesn't work) to constrain the overflow div to that height
If in the future you're dealing with an overflow div that doesn't sit inside a grid, make sure to clamp its height with something like max-height: 100% (or height: 100% is also fine if you want the overflowing div to always take up the whole height)In the OPs code the parents height is set to 70vh (by setting min and max heights with the same value)
Yeah but since it's grid they also need to set the row height
What i mean is, if your scrolling div is not inside a grid, you need to clamp its height with other means
Great!
grid-template-rows: 1fr works for me. Btw, I don't know why hieght: 70vh does not work as I expect, so I must use min and max hieght hereThat's the preferred way anyway
Breaks browser zooming