基于Mantine+Next.js实现Flex换行且小视口最多2行横向滚动

现有代码的问题在于滚动方向和换行逻辑不匹配，调整后可实现需求：

核心调整思路 #

• 宽视口（sm及以上）：保持Flex自动换行，高度自适应
• 小视口（base）：限制内容最多2行，开启横向滚动，同时确保内容不被压缩

修改后的代码（Flex版） #

<ScrollArea 
  orientation="horizontal" 
  scrollbarSize={6}
  h={{ base: 65, sm: 'auto' }}
>
  <Flex 
    wrap={{ base: 'nowrap', sm: 'wrap' }} 
    rowGap={10} 
    columnGap={8}
    style={{ minWidth: 'max-content', height: '100%' }}
  >
    {services.map((service, i) => (
      <Button key={i}>{service}</Button>
    ))}
  </Flex>
</ScrollArea>

严格限制2行的Grid方案（更精准） #

如果需要强制小视口下最多显示2行，用Grid布局更可靠：

<ScrollArea 
  orientation="horizontal" 
  scrollbarSize={6}
  h={{ base: 65, sm: 'auto' }}
>
  <Grid 
    rowGap={10} 
    columnGap={8}
    style={{ 
      minWidth: 'max-content',
      gridTemplateRows: { base: 'repeat(2, 1fr)', sm: 'none' },
      height: '100%'
    }}
  >
    {services.map((service, i) => (
      <Grid.Col key={i}>{service}</Grid.Col>
    ))}
  </Grid>
</ScrollArea>

关键修改点 #

• 给ScrollArea设置orientation="horizontal"开启横向滚动
• 小视口下通过minWidth: 'max-content'确保内容宽度足够触发滚动
• Flex版用wrap="nowrap"禁止换行，Grid版用gridTemplateRows强制2行布局
• 固定小视口下的容器高度，刚好容纳2行按钮（含间距）

内容的提问来源于stack exchange，提问作者A.Anvarbekov