Chakra UI中设置height:100%的Card无法继承父容器高度怎么办？

我在使用Chakra UI渲染带文本内容的Card组件时，遇到了卡片高度不一致的问题：每个Card内文本长度不同，原本计划通过给Card设置h='100%'、给父容器HStack设置h='fit-content'来让所有Card高度统一（父容器适配最高Card高度，子Card填充满父容器），但实际Card仍仅适配自身内容高度，效果如下：

相关代码 #

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

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

问题原因 #

HStack默认基于Flex布局，当设置alignItems='flex-start'时，子元素不会被拉伸填充父容器高度。虽然h='fit-content'让父容器高度匹配最高子元素，但Card的h='100%'无法正确继承父容器高度——因为Flex容器在align-items: flex-start模式下，不会强制子元素填充高度。

解决方法 #

方法1：修改HStack的alignItems属性 #

这是最直接的方案：把HStack的alignItems='flex-start'改为alignItems='stretch'，Flex布局会自动让所有子元素拉伸至父容器的高度，此时Card的h='100%'可以保留（也可以去掉，stretch已经能实现等高）：

// 修改Main.tsx中的HStack
<HStack h='fit-content' alignItems='stretch'>
  {ideateSteps.map((value, index) => {
    return <IdeateStepCard {...value} key={index} />
  })}
</HStack>

方法2：改用Grid布局实现等高 #

如果更倾向于Grid的布局逻辑，直接用Grid替代HStack即可，Grid默认会让同一行的所有子元素高度一致，无需额外设置Card高度：

// 替换原来的HStack为Grid
<Grid templateColumns='repeat(auto-fit, minmax(250px, 1fr))' gap='2rem'>
  {ideateSteps.map((value, index) => {
    return <IdeateStepCard {...value} key={index} />
  })}
</Grid>

方法3：强制父容器高度传递（不推荐） #

如果必须保留alignItems='flex-start'，可以给HStack设置minHeight='100%'，同时确保Card的直接父节点（HStack的子元素）拥有height='100%'，但这种方式不如前两种简洁，仅作为特殊场景的备选。

内容的提问来源于stack exchange，提问作者howranwin