I am developing an web app that should fill 100vh and 100vw of the monitor.
The app itself should not scroll vertically or horizontally, but individual components/divs inside the app are allowed to scroll.
On the global css, I have the following defined
body { background: none !important; margin: 0; user-select: none; height: 100vh !important; width: 100vw !important; overflow: hidden !important;}I am using Mantine as my components library in a React project.
The user is able to enter a search query, and it will return a list of search results.
I am using a Stack to display the results.
If the list of search results is large enough to overflow the parent container's height, I want the Stack to be able to scroll vertically for the user to view the remaining 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 have attempted to wrap the Stack in a ScrollArea, however this only works if I define the height to a fixed value.
<ScrollArea style={{ height: 500 }}><Stack sx={ ... }> ...</Stack></ScrollArea>This however does not give the behaviour I would like, as I want the results to be responsive and fill the height of the parent, and then overflow the remainder.
If, for example I set the height to 100%, the stack will overflow the parent, and the scroll never comes up.
<ScrollArea style={{ height: "100%" }}><Stack sx={ ... }> ...</Stack></ScrollArea>How do I use Mantine components to correctly display a list of search results until the max height of the parent, and then overflow?