使用Mantine实现搜索结果列表填满父容器后垂直滚动

问题核心是当设置height:100%时，子元素需要依赖父容器的明确高度约束才能生效。针对你的场景，推荐两种灵活的实现方案：

方案一：使用Flex布局自动填充剩余空间（推荐） #

利用Mantine的Flex组件实现垂直布局，让滚动区域自动占满容器剩余高度，无需手动计算尺寸：

import { Flex, ScrollArea, Stack, Input } from '@mantine/core';

function SearchPage() {
  // 模拟搜索结果数据
  const searchResults = Array.from({ length: 50 }).map((_, idx) => `搜索结果 ${idx + 1}`);

  return (
    // 外层Flex占满整个视口，垂直排列子元素
    <Flex direction="column" h="100vh" w="100vw" p="md">
      {/* 顶部搜索框（固定高度） */}
      <Input placeholder="输入搜索关键词" mb="md" />

      {/* 滚动区域自动填充剩余垂直空间 */}
      <ScrollArea flex={1} type="auto">
        <Stack gap="sm">
          {searchResults.map((item, idx) => (
            <div key={idx} p="md" bg="gray.100" borderRadius="sm">
              {item}
            </div>
          ))}
        </Stack>
      </ScrollArea>
    </Flex>
  );
}

原理说明： #

• Flex容器设置h="100vh"和direction="column"，确保整体占满视口且子元素垂直排列。
• 搜索框是固定高度的元素，ScrollArea通过flex={1}（即flexGrow:1）自动填充容器剩余的垂直空间，此时滚动区域的高度是明确的。
• 内部Stack随内容自然撑开，当高度超过ScrollArea的可用空间时，自动触发垂直滚动。

方案二：通过父容器明确高度约束实现 #

如果不使用Flex布局，可给ScrollArea的直接父容器设置明确高度（基于上层容器的高度计算）：

import { Box, ScrollArea, Stack, Input } from '@mantine/core';

function SearchPage() {
  const searchResults = Array.from({ length: 50 }).map((_, idx) => `搜索结果 ${idx + 1}`);

  return (
    <Box h="100vh" w="100vw" p="md">
      <Input placeholder="输入搜索关键词" mb="md" />
      
      {/* 父容器通过calc计算剩余高度（需预估搜索框高度） */}
      <Box h="calc(100% - 64px)">
        <ScrollArea h="100%">
          <Stack gap="sm">
            {searchResults.map((item, idx) => (
              <div key={idx} p="md" bg="gray.100" borderRadius="sm">
                {item}
              </div>
            ))}
          </Stack>
        </ScrollArea>
      </Box>
    </Box>
  );
}

注意事项： #

• 确保全局body的margin、padding已重置（Mantine默认会处理，但自定义样式需检查），避免出现意外的滚动或间距。
• ScrollArea的type属性设为auto时，仅在内容溢出时显示滚动条；设为always则始终显示滚动条。
• 不要给Stack设置固定高度，让它随内容自然延伸，滚动逻辑完全交给ScrollArea处理。

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