Having an element with 100% height means that it must not have sibling nodes, as their total height goes above 100%.
With this in mind, it will be easier to let the splitter take care of resizing the container where the grid is, so you can avoid the extra math and just .resize() the grid.
It is also important to note that you need enough data in the grid for the container to get filled up.
That said, here are two examples:
In both examples I intentionally left an extra div with yellow background that wraps the grid so you can know that if you see it, the grid is not 100% tall, and also - to showcase how all elements in the tree must have 100% height or pixel height (as the splitter pane) for this to work out. You can remove this div later, it is here to showcase and for testing.