Flex布局使用basis属性时出现意外垂直溢出问题求助

问题描述 #

我编写了如下代码：

export default function Home() {
  const lists = ["List A", "List B", "List C", "List D"]

  return (
    <div className="flex gap-3">
      {lists.map(list => {
        return <div key={list} className="grow-0 shrink-0 basis-80 bg-red-200">{list}</div>
      })}
    </div>
  )
}

我需要每个列表项宽度固定为20rem（对应Tailwind的basis-80类），当前该设置生效。当添加过多列表项时，会如预期出现水平滚动条，但无法理解为何此时同时出现垂直溢出——从截图可见，列表仅占用了少量垂直空间。

无水平溢出状态：

出现双轴溢出（仅预期水平溢出）状态：

问题原因 #

垂直溢出的核心原因是水平滚动条占据了垂直空间，导致父元素的可用高度被挤压：

• 当flex容器内容过多触发水平溢出时，若滚动条在父元素层面生成（而非flex容器内部），滚动条本身会占用10-16px的垂直高度。
• 如果父元素设置了固定高度（比如100vh），原本的内容高度加上滚动条高度会超过父元素的高度限制，进而触发垂直溢出。

解决方案 #

给flex容器添加overflow-x-auto，让水平滚动条在容器内部生成，避免影响父元素的高度计算：

export default function Home() {
  const lists = ["List A", "List B", "List C", "List D", "List E", "List F"]

  return (
    <div className="flex gap-3 overflow-x-auto">
      {lists.map(list => {
        return <div key={list} className="grow-0 shrink-0 basis-80 bg-red-200">{list}</div>
      })}
    </div>
  )
}

补充说明 #

• overflow-x-auto会在内容水平溢出时自动显示滚动条，且滚动条属于flex容器本身，不会挤占父元素的垂直空间。
• 若需隐藏滚动条但保留滚动功能，可额外添加Tailwind的scrollbar-hide类（需提前配置tailwind-scrollbar插件），这属于可选优化。

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