diff --git a/client/components/Sidebar.js b/client/components/Sidebar.js
index c13fd04e56201..05af4600013b3 100644
--- a/client/components/Sidebar.js
+++ b/client/components/Sidebar.js
@@ -6,15 +6,17 @@ import { useTranslation } from '../contexts/TranslationContext';
 import { useRoutePath } from '../contexts/RouterContext';
 import ScrollableContentWrapper from './ScrollableContentWrapper';
 
-const Sidebar = ({ children, ...props }) => <Box display='flex' flexDirection='column' h='full' {...props}>
+const Sidebar = ({ children, ...props }) => <Box display='flex' flexDirection='column' h='full' justifyContent='stretch' {...props}>
 	{children}
 </Box>;
 
-const Content = ({ children, ...props }) => <ScrollableContentWrapper {...props}>
-	<Box display='flex' flexDirection='column' h='full'>
-		{children}
-	</Box>
-</ScrollableContentWrapper>;
+const Content = ({ children, ...props }) => <Box display='flex' flexDirection='column' flexGrow={1} flexShrink={1} overflow='hidden'>
+	<ScrollableContentWrapper {...props}>
+		<Box display='flex' flexDirection='column' w='full' h='full'>
+			{children}
+		</Box>
+	</ScrollableContentWrapper>
+</Box>;
 
 const Header = ({ title, onClose, children = undefined, ...props }) => <Box is='header' display='flex' flexDirection='column' pb='x16' {...props}>
 	{(title || onClose) && <Box display='flex' flexDirection='row' alignItems='center' pi='x24' justifyContent='space-between' flexGrow={1}>