Table overflow on rows

[MartijnHarmenzon]

Does anyone have an example on how to set overflow on table rows?
I have a div with a fixed height. Within this div I have created a table with my rows. But I want to set an overlow so the page will remain the same, and you can scroll through the table rows.

As shown in the image below, the table in panel 2 is overlapping panel 3. The table should be contained within panel 2.

I created an example on codepen. Help is much appreciated.
https://codepen.io/martijnharmenzon-the-looper/pen/VwvVmLb

[estevanmaito]

Take a look at the modifications I made: https://codepen.io/estevanmaito/pen/GRpwmWx?editors=1000

Please, take a moment to consider why I did what I did and ask me if you have doubts.

A few key points:

• Your absolute container around the table, with the h-full will take the same total height as the parent element. You add mt-2, so it bleeds.
• I fixed it by putting everything inside a flex container, used flex-col to make items stack, and placed the table container inside another div with relative. Now flex will take care of it's 2 children and make them fit.

[MartijnHarmenzon]

Thank you very much @estevanmaito . I used your modifications and was even able to achieve the same without using flex. I am very pleased with the outcome. Thank you.

https://codepen.io/martijnharmenzon-the-looper/pen/VwvVmLb

[estevanmaito]

I think you're missing the last element (there are 15 rows, and just 14 are being displayed), also the scroll bar is being hidden, a sign that the element is being overflown.

Compare the result of both our solutions.

[MartijnHarmenzon]

@estevanmaito Thanks for pointing this out! Much appreciated. I have made some adjustments. I prefer to make use of grid instead of flex. Seems to work also.

https://codepen.io/martijnharmenzon-the-looper/pen/VwvVmLb?editors=1100