Table does not resize correctly in `display: grid` context

[tiwe-ppi]

Hello there, we stumbled upon an interesting datatables bug.

When there is a table in a container with display: grid, the table can only grow but never shrink when the container/window is resized. This happens when the scrollY option is set. If I change the containers display property to simply block it works as expected meaning the tables grows and shrinks.

I created a codepen with an easy toggle for the display property:
https://codepen.io/timw-ppi/pen/WbrjgBy

The use case is the following: We need to place two tables next to each other (with buttons in between) and the tables should have the same size. display: grid is perfect for this. We tried display: flex but that causes ResizeObserver errors in datatables. We will try to find a different workaround for now.

[tiwe-ppi]

datatables-361.mp4

[tiwe-ppi]

I was also able to reproduce this bug with display: flex. But at least for our use case I found a workaround:

• Use display: flex on the container.
• Set the width property explicitly on the table containers (we have additional divs wrapping the tables). This is a complicated calc(...) expression in our case.

[AllanJard]

Its the scrollY that is causing the issue. Removing that allows it to work no problem: https://codepen.io/DataTables/pen/Qwyvewv .

The issue with scrollY is that it has to set an explicit width for the table container, because of how it splits the table up into three parts (header, body and footer). I've got a plan to address that, although it is quite a significant piece of work, so I'm afraid this isn't going to be fixed tomorrow.

It is weird that display: block works okay though - I'm missing something, but I'm not immediately sure what!

[tiwe-ppi]

Thanks for the reply. Unfortunately we have to limit the height, so I guess we have to set scrollY. Unless there are other ways to achieve this?

I also managed to get it to work with flexbox: https://codepen.io/timw-ppi/pen/zxrzNQW

So whatever is causing this, in theory it should work...

[AllanJard]

I don't think there is another option at the moment I'm afraid - sorry. With x-scroll you'd just wrap the table in a overflow: auto container, but with y-scroll if you do that you loose the header. I do have an idea for how to address this, but it is likely months away from fruition I'm afraid.