CODEWITHSUNDEEP
cssreactjschakra-ui
Yashwanth Remidi
Yashwanth Remidi

Reputation: 161

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>

Upvotes: 1

Views: 17983

Answers (1)

Mic Fung
Mic Fung

Reputation: 5692

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>

Upvotes: 3

Related Questions