I am currently in the process of developing a web application that needs to occupy the entire height and width of the screen using 100vh and 100vw.
The main app itself should not have any vertical or horizontal scrolling, but individual components/divs within the app are allowed to scroll independently.
In the global CSS settings, I have defined the following:
body {
background: none !important;
margin: 0;
user-select: none;
height: 100vh !important;
width: 100vw !important;
overflow: hidden !important;
}
For my React project, I have incorporated Mantine as my component library.
Users can input search queries which will then display a list of search results.
To showcase the search results, I am utilizing the Stack component.
If the list of search results is long enough to exceed the height of its container, I want the Stack to be able to scroll vertically for users to view all the search results.
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>
)
I've tried wrapping the Stack in a ScrollArea, but it only works if I set a fixed height.
<ScrollArea style={{ height: 500 }}>
<Stack sx={ ... }>
...
</Stack>
</ScrollArea>
This approach doesn't provide the desired behavior, as I need the results to adapt responsively to fill the parent's height before overflowing.
Setting the height to 100% causes the Stack to overflow the parent without triggering the scroll function.
<ScrollArea style={{ height: "100%" }}>
<Stack sx={ ... }>
...
</Stack>
</ScrollArea>
How can I effectively utilize Mantine components to correctly present a list of search results within the parent container's maximum height, allowing for overflow when needed?