Search code examples
reactjsflexboxnext.jschakra-ui

justify-content is not applying in chakra ui

I'm developing a Website using Next.js and Chakra-ui. Here I'm tring to align the ButtonGroup to the end. For that I'm trying to use justifyContent="space-between" but itsnt working. Here is the code for the Card Components

            <Flex direction="column" px={0} justifyContent="space-between">
                <Flex px={10} pt={10} direction="column" lineHeight="7" mb={5}>
                    <Heading size="sm">{data.name}</Heading>
                    <UnorderedList mt={5}>
                        {data.features.map((element, index) => (<ListItem key={index} fontSize="13px">{element}</ListItem>))}
                    </UnorderedList>
                </Flex>
                <ButtonGroup spacing="0">
                    <Button w="100%" m={0} borderRadius="0 0 0 20px" fontSize="14px">
                        Explore More
                    </Button>
                    <Button
                        w="100%"
                        color="white"
                        bg="#274E85"
                        m={0}
                        borderRadius="0 0 20px 0"
                        fontSize="14px"
                    >
                        Apply Now
                    </Button>
                </ButtonGroup>

            </Flex>

Please Someone help me solve this enter image description here

Solution

  • Add flexGrow=1 to your main flex, or try height: 100%

    answer by @Sephyre