My React component includes a Material UI <Paper> component that acts as a background. This <Paper> is nested inside a <ThemeProvider>, which in turn is nested within a <div>, and then further nested inside the <body>. I have set the attribute to viewport: 100vh to make it take up the entire height of the screen. Initially, it does fill the full height, but once another <Paper> component is rendered on the right side, the bottom of the original paper no longer extends to the bottom of the screen:
https://i.sstatic.net/KtX4s.png
This is how the App render method begins:
return (
<ThemeProvider theme={theme}>
<Paper style={{ height: '100vh', boxShadow: 'none' }}>
<Container fluid id='app'>
.......
)I attempted applying the viewport: 100vh attribute to both the wrapping <div> in index.js and the <body> element in index.html, but saw no difference. It's worth noting that I am currently using react-bootstrap Containers/Rows/Cols for my grid system (yet to switch to Material UI), but they are all nested within the <Paper>, so I don't believe they are causing the issue. Removing any applied css on the <Container> also did not resolve the problem.
The <ThemeProvider> is using a muiTheme:
export default function createTheme(isDarkModeEnabled) {
return createMuiTheme({
palette: {
type: isDarkModeEnabled ? 'dark' : 'light',
primary: {
main: '#6DD3CE',
dark: '#639FAB'
},
secondary: {
main: '#52CBC5'
}
},
typography: {
fontFamily: [ 'montserratlight', 'Times New Roman' ].join(','),
body2: {
fontFamily: [ 'montserratmedium', 'Times New Roman' ].join(',')
},
h3: {
fontSize: '1.75rem'
},
button: {
fontFamily: [ 'montserratmedium', 'Times New Roman' ].join(',')
}
}
})
}Update and Solution
I opted to redesign my layout using flexbox instead of react-bootstrap, and managed to resolve the issue by changing from height: 100vh to min-height: 100vh for the container, allowing it to expand accordingly.