chakra ui card full height doesn't inherit parents

I'm trying to render out Cards with some texts using the Chakra UI framework. Each of the cards renders out texts with varying lengths.

I want the cards to all be at the same height by using the height: 100% property on it, and the parent container containing the cards will be at height: fit-content to be at the height of the largest card.

In Main.tsx

// ... imports

const Main: React.FC = () => {
  return (
    <VStack as='section' justifyContent='center' gap='4rem'>
      <VStack gap='2rem'>
        <Heading as='h1' size='2xl' fontWeight='600' textAlign='center'>
          Lorem ipsum dolor, sit amet consectetur adipisicing
        </Heading>
        <Flex justifyContent='center'>
          <Text textAlign='center' w='65%' color='gray.600'>
            Lorem ipsum, dolor sit amet consectetur adipisicing elit. Modi,
            voluptate delectus. Vero magnam harum natus sunt corporis, porro
            quisquam quo magni dignissimos.
          </Text>
        </Flex>
      </VStack>
      <HStack h='fit-content' alignItems='flex-start'>
        {ideateSteps.map((value, index) => {
          return <IdeateStepCard {...value} key={index} />
        })}
      </HStack>
    </VStack>
  )
}

export default Main

In IdeateStepCard.tsx

// ... imports

const IdeateStepCard: React.FC<IdeateStepProps> = (props) => {
  return (
    <Card
      flex='1'
      bg='gray.100'
      border='1px solid'
      borderColor='gray.200'
      shadow='none'
      h='100%'
    >
      <CardHeader>
        <Box p='0.25rem' bg='white' w='fit-content' rounded='100%'>
          <Box p='0.25rem' bg='teal.100' rounded='100%'>
            <Box w='2rem' h='2rem' />
            {/* <Image src={props.logo} objectFit='contain' w='2rem' h='2rem' /> */}
          </Box>
        </Box>
      </CardHeader>
      <CardBody>
        <Heading size='sm' mb='1rem'>
          {props.title}
        </Heading>
        <Text fontSize='sm' color='gray.500'>
          {props.description}
        </Text>
      </CardBody>
    </Card>
  )
}

export default IdeateStepCard

My understanding is that in the parent component of the HStack, using h='fit-content', the height of the container containing the cards will be the largest of the cards. Then setting the card height to 100% should fill the card to the maximum height of the parent container but card still only fit the height of its content.

<HStack /> is a flex container, so we can take inspiration from this stack overflow answer from How can I make Flexbox children 100% height of their parent? to make sure the children of <HStack /> take up the full height that is available. I've never used Chakra UI, but from looking at their code, it seems you could get the result you want by removing the h='100%' on the <Card /> and changing alignItems='flex-start' to alignItems='stretch' on the <HStack />.

// Main.tsx
<HStack alignItems='stretch'>
    {ideateSteps.map((value, index) => {
        return <IdeateStepCard {...value} key={index} />
    })}
</HStack>

// IdeateStepCard.tsx
<Card
  flex='1'
  bg='gray.100'
  border='1px solid'
  borderColor='gray.200'
  shadow='none'
>
    ...
</Card>

This is a working example without using Chakra UI:

.hstack {
  width: 100%;
  display: flex;
  align-items: stretch;
  gap: 16px;
  padding: 16px;
  font-family: system-ui;
  box-sizing: border-box;
}

.card {
  flex: 1 1 0%;
  border-radius: 15px;
  border: 1px solid #000;
  background: rgb(229, 231, 235);
  padding: 16px;
}

<div class="hstack">
  <div class="card">Lorem ipsum, dolor sit amet consectetur adipisicing elit. Minus facilis obcaecati molestiae inventore fugiat. Perspiciatis dolorem consequatur magni voluptatibus corporis quod quidem laudantium sed deleniti, molestias saepe repellendus aspernatur sit.</div>
  <div class="card">Lorem ipsum, dolor sit amet consectetur adipisicing elit. Minus facilis obcaecati molestiae inventore fugiat. Perspiciatis dolorem consequatur magni voluptatibus corporis quod quidem laudantium sed deleniti, molestias saepe repellendus aspernatur sit. Lorem ipsum, dolor sit amet consectetur adipisicing elit. Minus facilis obcaecati molestiae inventore fugiat. Perspiciatis dolorem consequatur magni voluptatibus corporis quod quidem laudantium sed deleniti, molestias saepe repellendus aspernatur sit.</div>
  <div class="card">Lorem ipsum, dolor sit amet consectetur adipisicing elit. Minus facilis obcaecati molestiae inventore fugiat. Perspiciatis dolorem consequatur magni voluptatibus corporis quod quidem laudantium sed deleniti, molestias saepe repellendus aspernatur sit.</div>
</div>