My goal is to create a webpage that resembles a window application. However, I've encountered an issue where zooming in on the page results in a scroll bar appearing on the main page. The parameters for the main page (the parent) are set as follows: width: 100vw, height: 100vh
I'm looking for a solution to enable scrolling through the components inside the main page (the children components) instead of scrolling the main page itself (the parent component). Below is the CSS code snippet for my setup:
The initial CSS code for the main page (parent), styled using Material-ui, with 'root' as the className for the main page and 'header', 'breadCrumb', and 'content' as the classes for my children components.
const useStyles = makeStyles({
root: {
width:'100vw',
height: '100vh',
},
header: {
height: '10%',
},
breadCrumb: {
height: '10%',
},
content: {
height: '80%',
}
Now, the 'content' component also contains its own children elements (sidebar and content) with their respective CSS properties outlined below:
const useStyles = makeStyles({
root: {
border: '1px solid blue',
display: 'flex',
width:'auto',
height: 'auto',
},
sidebar: {
backgroundColor: 'orange',
width: '20%',
height: 'auto',
border: '1px solid red',
overflow: 'scroll'
},
content: {
height: 'auto',
width: '80%',
}
If there's something crucial that I may have missed or if you have any suggestions to tackle this issue, please provide guidance. Any help would be greatly appreciated!