Currently, I am in the process of designing a layout for my app. My goal is to have the .main__content element fill the available height and scroll if it exceeds that space.
I attempted to wrap the paragraphs within another div but was unsuccessful. Is there a method that would enable me to achieve this desired behavior?
App.tsx
function App() {
const items = new Array(50).fill(null);
return (
<div className={style.workspace}>
<div className={style.header}>header</div>
<div className={style.content}>
<div className={style.menu}>menu</div>
<div className={style.sidebar}>sidebar</div>
<div className={style.main}>
<div className={style.tabs}>tabs</div>
<div className={style.main__content}>
{items.map((_, index) => (
<p key={index}>line</p>
))}
</div>
</div>
</div>
<div className={style.footer}>footer</div>
</div>
);
}
styles.scss
.workspace {
width: 100vw;
height: 100vh;
display: grid;
grid-template-rows: 48px calc(100% - 72px) 24px;
.header {
background: coral;
}
.content {
display: grid;
grid-template-columns: 48px 300px calc(100vw - 348px);
background: red;
.menu {
background: darkslateblue;
}
.sidebar {
background: darkslategray;
}
.main {
height: 100%;
display: flex;
flex-direction: column;
.tabs {
height: 48px;
background: cyan;
}
&__content {
flex-grow: 1;
background: rebeccapurple;
display: flex;
flex-direction: column;
overflow-y: auto;
}
}
}
.footer {
background: yellowgreen;
}
}