Chakra UI的Skeleton组件在父级应用Flexbox属性时无法正常显示

异常原因 #

该问题是Flex布局默认规则与Chakra UI Skeleton组件的默认样式共同作用的结果，不属于组件bug，具体逻辑如下：

• Chakra UI Skeleton 组件默认样式为 width: 100%、height: auto，渲染时需要父容器提供明确的尺寸作为基准
• 父级Box设置display: flex后，两个直接子元素会成为Flex项，Flex布局默认给所有子项开启flex-shrink: 1，允许子项在空间不足时被压缩
• 圆形Skeleton已经配置了固定宽高，不受压缩规则影响，可以正常渲染
• 内置两个Skeleton的Box作为Flex子项未配置flex: 1或明确宽度，会被压缩到最小内容宽度，其内部Skeleton依赖父级宽度的width: 100%属性会失效，最终组件渲染宽度为0无法显示

修复方案 #

给作为Flex子项的内部Skeleton容器Box添加flex: 1属性即可，示例代码参考：

<Box display="flex" gap={3} alignItems="center">
  {/* 已配置固定宽高的圆形Skeleton */}
  <Skeleton boxSize="48px" borderRadius="full" />
  {/* 新增flex:1属性，给内部Skeleton提供宽度基准 */}
  <Box flex={1}>
    <Skeleton mb={2} h="20px" w="80%" />
    <Skeleton h="16px" w="60%" />
  </Box>
</Box>

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