React中如何为每个子菜单div设置不同宽度？

你的问题核心在于：父容器设置w="100%"会强制所有子菜单容器占满可用宽度，导致窄内容的子菜单也被拉宽；直接用fit-content又因为内部元素的默认样式限制，无法正常撑开容器。

具体修改方案 #

1. 移除父容器的w="100%"，改用width="fit-content"实现宽度自适应
2. 添加minW设置最小宽度，避免内容过短时收缩至不可读
3. 让内部子项容器和<Option>元素继承父容器宽度，保证内容对齐和正常换行

修改后的代码示例 #

{showNestedOptions && (
  <Box           
    width="fit-content"
    minW="120px"
    maxW="400px"
  >
    {map(props.data.nestedOptions, (nestedOption, index: number) => {
      const label = nestedOption.label;
      return (
        <Box key={index} width="100%">
          <Option textAlign="left" width="100%">
            <Box h={'100%'} whiteSpace="normal">
              {label}
            </Box>
          </Option>
        </Box>
      );
    })}
  </Box>
)}

关键修改说明 #

• width="fit-content"：让容器宽度自动匹配内部最宽的内容，不会强制拉伸到100%宽度
• minW="120px"：自定义最小宽度阈值，你可以根据实际需求调整数值，确保短文本子菜单也有足够可读性
• 子项<Box>和<Option>设置width="100%"：保证每个子菜单选项占满父容器的自适应宽度，避免内容错位或异常收缩

额外排查点 #

如果修改后仍有异常，检查以下内容：

• 父级元素是否存在overflow: hidden或特殊position属性干扰布局
• 确认whiteSpace="normal"生效，让长文本自动换行，容器会根据换行后的内容计算合适宽度

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