html - Child items grow the container instead of overflow

Question

guys. I'm a total noob when it comes to web design. I know that I'm kind of over using flex. But!! It's so easy with them.

Anyway, my issue is that one of my component (using TailwindCSS and React) is a Infinite Loading List, but the thing is that the element in the list are growing the container even do it has overflow: auto. I have been tearing my head apart.

I have set the container's background in a dark color so the problem could be understood faster. If you want to see the code itself it's on https://pastebin.com/Vhuxii6j

I really don't know what else to do. I have tried to put flex-shrink in the container so it would not grow, but it does nothing. I have tried putting the child elements as inline-flex, nothing.

Thanks in advance :)

question from:https://stackoverflow.com/questions/65894334/child-items-grow-the-container-instead-of-overflow

Answer 1

Figured out the Issue Here is what you need to do, on the scroll list you will need to change overflow-auto to overflow-y-scroll and also add max-h-# where # is any of the preset number from the tailwind here is the link for the doc i refered to

I have attached link to the solution for the output where i set the max-h-80 This show that the issue is with the auto height inheritance. for which you may have to retink your base layout

NOTE - You may have to change the view on the codepen.io link and bring the result at bottom incase if it doesnt open it in that layout.