I am encountering an issue with my grid layout involving the menu, header, and content.
The problem lies in the fact that I want the content (blue box) to expand vertically within the grid element (yellow box). Currently, the grid stretches vertically, but the blue content inside it remains fixed.
Is there a solution to this problem that does not involve converting the entire grid structure to flexbox or using calc to manually adjust the height of the blue content?
.container {
height: 100vh;
display: grid;
grid-template-rows: min-content 1fr;
grid-template-columns: min-content 1fr;
grid-template-areas: "menu header" "menu content";
box-sizing: border-box;
overflow: hidden;
}
.mainMenuWrapper {
grid-area: menu;
height: auto;
}
.headerWrapper {
grid-area: header;
height: auto;
}
.contentWrapper {
grid-area: content;
overflow-y: auto;
height: auto;
background-color: yellow;
}
.menu {
height: 100vh;
background-color: red;
width: 50px;
}
.header {
height: 80px;
background-color: green;
}
.content {
background-color: blue;
width: 100%;
height: ???
}<div class="container">
<div class="mainMenuWrapper">
<div class="menu">
menu
</div>
</div>
<div class="headerWrapper">
<div class="header">
header
</div>
</div>
<div class="contentWrapper">
<div class="content">
content
</div>
</div>
</div>Image:
JSFiddle link: https://jsfiddle.net/the2sj1n/3/