Flex容器持续撑满页面：为何无法表现得像Block元素？

你遇到的问题核心是Flex布局与Block布局的默认特性差异：

• Block容器的子元素默认是块级元素，会自动占满父容器宽度并在空间不足时换行，不会强行挤压超出容器范围
• Flex容器默认开启flex-wrap: nowrap（强制不换行），且子元素默认flex-shrink: 1允许收缩，但如果子元素内容总宽度超过容器，nowrap会强制所有子元素挤在一行，直接撑破容器导致页面被拉长。

不需要修改全局样式或使用固定宽度，只需调整两个Flex相关属性就能解决：

1. 给Flex容器添加flex-wrap: wrap，让子元素在空间不足时自动换行，避免强行撑满一行
2. 给内部的Tooltip（Chip的外层容器）设置flex-shrink: 0，确保每个Chip保持自身内容宽度，不会被过度挤压

修改后的代码示例：

<div>
  <div
    style={{
      display: 'flex',
      flexWrap: 'wrap', // 开启自动换行
      gap: '8px' // 可选：给Chip之间添加间距，提升美观度
    }}>
    {chips.map((option, index) => {
      return (
        <Tooltip
          key={option.name}
          title={isChipFoundInOptions ? '' : 'Option not found in this profile context.'}
          style={{ flexShrink: 0 }} // 禁止收缩，保留Chip自身宽度
        >
          <Chip
            label={`${option.displayName} - ${option.name}`}
            // {...getChipProps({ index })}
          />
        </Tooltip>
      )
    })}
  </div>
</div>

调整后，Flex容器的表现会和你预期的Block容器类似：子元素自动换行，不会撑满整个页面，同时保留Flex布局的灵活性。

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