Make a div in a grid stretch to full height-CodePudding

I have a very simple grid layout of the menu, header, and content.

I would like the content (blue box) to stretch vertically. As you can see, the grid element (yellow box) already stretches vertically, but the blue element inside of it (which should be dynamic content) does not.

Is there a way to achieve this 1) without switching the whole grid structure to flexbox and 2) without using calc to give the blue content 100vh minus the header height?

.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 >
  <div >
    <div >
      menu
    </div>
  </div>
  <div >
    <div >
      header
    </div>
  </div>
  <div >
    <div >
      content
    </div>
  </div>
</div>

Image:

JSFiddle link: https://jsfiddle.net/the2sj1n/3/

CodePudding user response：

You can apply height: 100% on that blue box .content

body {
  margin: 0; /*Removed unexpected margins from browsers' default styles*/
}

.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: 100%; /*The change here*/
}

<div >
  <div >
    <div >
      menu
    </div>
  </div>
  <div >
    <div >
      header
    </div>
  </div>
  <div >
    <div >
      content
    </div>
  </div>
</div>