How to fill the remaining space in a Stack Chakra-UI?

Is there a way i can make this work? Since flex={1} doesn't do the job?

Or else are there better ways to achieve the same ?

<HStack w='full' spacing={2} bg='yellow.50' align='flex-start'>
  <VStack align='flex-start' h='full'>
        <Box w={20} h={20} bg='blue.200' class="fixed height element" />
        <Box w='20' h='full' bg='green.200' flex={1} class="Fill the remaining height" />
  </VStack>
  <VStack w='full'>
        <Box h={20} w='full' bg='red.100' />
        <Box h={20} w='full' bg='red.300' />
        <Box h={20} w='full' bg='red.500' />
  </VStack>
</HStack>

Solution

Not quite sure If I get it right or wrong. The 1st VStack (green section) already fills the remaining space, so your problem is how the 2nd VStack fills the remaining space?

If yes, then the below code should work for you. Provide the height (h="full") to 2nd VStack and the last Box with h="full" will fill the remaining space.

<Grid minH="100vh" p={3}>
    <HStack w="full" spacing={2} bg="yellow.50" align="flex-start">
    <VStack align="flex-start" h="full">
        <Box w={20} h={20} bg="blue.200" class="fixed height element" />
        <Box w="20" h="full" bg="green.200" class="Fill the remaining height" />
    </VStack>
    <VStack w="full" h="full">
        <Box h={20} w="full" bg="red.100" />
        <Box h={20} w="full" bg="red.300" />
        <Box h="full" w="full" bg="red.500" />
    </VStack>
    </HStack>
</Grid>

USING only flexbox, Box with flexGrow: 1 to occupy all the remaining space

<HStack w="full" minH="100vh" alignItems="stretch" spacing={2} bg="yellow.50" align="flex-start">
    <VStack align="flex-start">
        <Box w={20} h={20} bg="blue.200" class="fixed height element" />
        <Box
            w="20"
            flexGrow="1"
            bg="green.200"
            class="Fill the remaining height"
        />
    </VStack>
    <VStack w="full" h="full">
        <Box h={20} w="full" bg="red.100" />
        <Box h={20} w="full" bg="red.300" />
        <Box h={20} w="full" bg="red.500" />
    </VStack>
</HStack>