Mantine - 显示结果列表，直到达到父级高度，然后启用垂直溢出

Question

我正在开发一个网络应用程序，应该填充显示器的

100vh

和

100vw

。

应用程序本身不应垂直或水平滚动，但应用程序内的各个组件/div 允许滚动。

在全局CSS上，我定义了以下内容

body {
  background: none !important;
  margin: 0;
  user-select: none;
  height: 100vh !important;
  width: 100vw !important;
  overflow: hidden !important;
}

我在 React 项目中使用 Mantine 作为我的组件库。

用户可以输入搜索查询，它将返回搜索结果列表。

我正在使用Stack来显示结果。

如果搜索结果列表大到足以溢出父容器的高度，我希望 Stack 能够垂直滚动，以便用户查看剩余的搜索结果。

  return (
    <div>
      <Grid p={8} gutter="lg">
        <Grid.Col span={4}>
          <TextInput
            placeholder="Search"
            label="Profile Search"
            icon={<IconSearch size={14} />}
            size="lg"
          />
          <Space h="lg" />

          <Stack sx={
            (theme) => (
              {
                overflowY: "auto",
              }
            )}>
            {/* repeated list of search results from query */}
            <SearchResult ... />
        </Stack>
      </Grid.Col>
    </Grid>
  )

我尝试将堆栈包装在ScrollArea中，但是只有当我将高度定义为固定值时，这才有效。

<ScrollArea style={{ height: 500 }}>
  <Stack sx={ ... }>
    ...
  </Stack>
</ScrollArea>

但这并没有给出我想要的行为，因为我希望结果能够响应并填充父级的高度，然后溢出其余部分。

例如，如果我将高度设置为 100%，堆栈将溢出父级，并且滚动永远不会出现。

<ScrollArea style={{ height: "100%" }}>
  <Stack sx={ ... }>
    ...
  </Stack>
</ScrollArea>

如何使用 Mantine 组件正确显示搜索结果列表，直到达到父级的最大高度，然后溢出？

Answer 1

您可以尝试这个以获得响应高度。

<ScrollArea.Autosize maxHeight={500}>

Mantine 文档：

https://mantine.dev/core/scroll-area/#scrollareaautosize