Grid vs Flex for side by side panels of different heights.

[hillac]

Hi, can a grid be used to do something like this?:

<Flex h='100vh' direction='row' align='flex-start'>
        <Box bg='blue' h='100%' w='30%'>
          1
        </Box>
        <Box flex={1} bg='red'>
          2
        </Box>
 </Flex>

ie, I need the left (blue) div to be 100% height, while the right (red) div is just the height of its content, but fills the remaining width. Obviously I can get it working with flexbox, but my full use-case is a little more complicated and if I can get it working for grid it would be nice. Or is grid just not intended for situations like this.

Thanks!