Max height in grid element won't wrok

Question

I have simple css/html where I'm trying to build nice onepage item selector, so you have items on your left inventory manager and when you click on them they will move them to another, but if you have more items than can div handle it should go in overflow-y: scroll; but it won't so I try add max-height:100%; so it won't destroy that nice look when there are not items but a parent don't have specific height number because it is in grid, I try use calc(100vh - 4rem) on parent so it would take 100vh without navbar but that doesn't looks good and it could make some problem in future when I will change navbar. You can copy that code into your html and remove all div.item so you will know how it should look like and then add div.item so you can see what is wrong

.container {
  display: grid;
  width: 100vw;
  height: 100vh;
  grid-template-columns: 1fr;
  grid-template-rows: 5rem 1fr;
  grid-template-areas: 
    "navbar" 
    "offer-manager";
}

.navbar {
  grid-area: navbar;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: stretch;
  background: yellow;
}

.main {
  grid-area: offer-manager;
  padding: 1rem;
  display: grid;
  grid-template-columns: 1fr 8rem 1fr;
  grid-template-rows: 1fr 6rem 12rem;
  grid-template-areas: 
    "inventory controls offer" 
    "inventory controls ." 
    "inventory . .";
  background: green;
}

.inventory {
  grid-area: inventory;
  display: flex;
  justify-content: center;
  align-items: flex-start;
  flex-wrap: wrap;
  padding: 1rem;
  max-height: 100%;
  overflow-y: scroll;
  background: blue;
}

.selectedItems {
  grid-area: offer;
  display: flex;
  justify-content: center;
  align-items: flex-start;
  flex-wrap: wrap;
  padding: 1rem;
  max-height: 100%;
  overflow-y: scroll;
  background: red;
}

.item {
  margin: 2rem;
  width: 8rem;
  height: 5rem;
  background: black;
}

<div class="container">
  <div class="navbar">
    <!-- navbar items -->
  </div>
  <div class="main">
    <div class="inventory">
      <div class="item"></div>
      <div class="item"></div>
      <div class="item"></div>
      <div class="item"></div>
      <div class="item"></div>
      <div class="item"></div>
      <div class="item"></div>
      <div class="item"></div>
      <div class="item"></div>
      <div class="item"></div>
      <div class="item"></div>
      <div class="item"></div>
      <div class="item"></div>
      <div class="item"></div>
      <div class="item"></div>
    </div>
    <div class="selectedItems">

    </div>
    <div class="controlButtons">

    </div>
  </div>
</div>

edit: I know that I could set fixed height but I need that size that I give to grid, so 100vh won't work because of navbar that is 4rem height.

edit2: calc(100vh - navbarHeight) kinda works but I would rather find something else because this would break after few changes in layout

Answer 1

Cleanest way to write it is that instead auto or 1fr I use calc(100vh - navbarHeight) grid-template-rows: 5rem calc(100vh - 5rem); So it would look like this:

.container {
        display: grid;
        width: 100vw;
        height: 100vh;
        grid-template-columns: 1fr;
        grid-template-rows: 5rem calc(100vh - 5rem);
        grid-template-areas: "navbar" "offer-manager";
    }