CSS Grid item overflow if container height is full height

Question

I want to have a container that has a toolbar and a very long list.

The toolbar should use the space it needs and the list should use the available space and should overflow with scrollbars if it is too large.

I don't want to set a fixed height to the container, toolbar or list.

Other questions say it works with minmax but this doesnt seem to work.

Currently the overflow is over the whole container but i want the overflow only on the list

.container {
  display: grid;
  grid-template-rows: max-content minmax(0, auto);
}

.item {
  min-height: 0;
  min-width: 0;
  overflow: auto;
}


/* for demo purpose*/

.toolbar {
  background-color: #2569af;
  padding: 8px;
}

.dummy {
  width: 30vw;
  height: 200vh;
  background-color: #787850;
}

body {
  margin: 0;
  padding: 0;
}

<div class="container">
  <div class="item toolbar">
    <button>Foo</button>
  </div>
  <div class="item list">
    <div class="dummy">this could be a very long list</div>
  </div>
</div>

Codepen

Answer 1

Would you consider flexbox instead? I'd put it this way:

*,
*:before,
*:after {
  box-sizing: border-box;
}

html,
body {
  width: 100%;
  height: 100%;
  padding: 0;
  margin: 0;
}

.container {
  display: flex;
  flex-flow: column wrap;
  width: 100%;
  height: 100%;
}

.toolbar {
  width: 100%;
  background-color: #2569af;
  padding: 8px;
}

.list {
  display: flex;
  flex-flow: row wrap;
  flex: 1;
  width: 200px; /* tweak to desired */
  overflow: auto;
}

.dummy {
  background-color: #787850;
}

<div class="container">
  <div class="item toolbar">
    <button>Foo</button>
  </div>
  <div class="item list">
    <div class="dummy">this could be a very long listthis could be a very long listthis could be a very long listthis could be a very long listthis could be a very long listthis could be a very long listthis could be a very long listthis could be a very long listthis could be a very long listthis could be a very long listthis could be a very long listthis could be a very long listthis could be a very long listthis could be a very long listthis could be a very long list</div>
  </div>
</div>