most inner child height doesn't change after parent size changes

I have a lot of Components inside GridLayout. This GridLayout has 4 rows. Each row has 8 columns. I want each Component inside GridLayout to have the same size so I set each Component have full size (Component.setSizeFull()). Each Component really has the same size. But full screen height is not taken by these Component. In CSS, I set .v-gridlayout-slot { height:25% }. Now full screen height is taken by these Component. Now I resize browser window, the width of these Component changes with resizing, but not height. SizeReporter reports the same results. How do I fix this issue?

Jim