How to keep both min and max size of CSS grid cells fixed

I am trying to use CSS grid to build an absolutely fixed layout. The layout s for an embedded app that has both GUI elements and text fields. Cell sizes are not supposed to change and readjust their sizes, and if content of the text fields overflows, scroll bars should appear, otherwise the whole GUI goes awry. No matter what I try, though, my cells change size and readjust as their content grows/shrink.

Setup:

*           Desired FIXED layout 
*    +------------------------+----------------------+
*    |                        |       2              |
*    |                        |----------------------|
*    |                        |       3              |
*    |                        |----------------------|
*    |                        |                      |
*    |                        |                      |
*    |                        |                      |
*    |         1              |                      |
*    |                        |       4              |
*    |                        |                      |
*    |                        |                      |
*    |                        |                      |
*    |                        |                      |
*    |                        |                      |
*    |                        |                      |
*    |                        |                      |
*    |------------------------+----------------------|
*    |                        |       6              |
*    |         5              |                      |
*    |                        |----------------------|
*    |                        |       7              |
*    +------------------------+----------------------+

and here is my MWE. I set minwidth and minheight to 0 in the container as per previous SX questions, but that does not seem to have an effect (also tried in the items, same result). (Browser is FF 66 dev edition, it if it matters)

.container {
  display: grid;
  grid-template-row: 70px 70px 310px 110px 30px;
  grid-template-column: 450px 350px;
  background: #FAEBD7;
  height: 590px;
  width: 700px;
  min-height: 0;
  min-width: 0;
}

.item1 {
  grid-column-start: 1;
  grid-column-end: 2;
  grid-row-start: 1;
  grid-row-end: 4;
  background: #675443;
}

.item2 {
  grid-column-start: 2;
  grid-column-end: 3;
  grid-row-start: 1;
  grid-row-end: 2;
  background: #42676B;
}

.item3 {
  grid-column-start: 2;
  grid-column-end: 3;
  grid-row-start: 2;
  grid-row-end: 3;
  background: #466567;
}

.item4 {
  grid-column-start: 2;
  grid-column-end: 3;
  grid-row-start: 3;
  grid-row-end: 4;
  background: #BABBAB;
}

.item5 {
  grid-column-start: 1;
  grid-column-end: 2;
  grid-row-start: 4;
  grid-row-end: 6;
  background: #FFD700;
}

.item6 {
  grid-column-start: 2;
  grid-column-end: 3;
  grid-row-start: 4;
  grid-row-end: 5;
  background: #FF69B4;
}

.item7 {
  grid-column-start: 2;
  grid-column-end: 3;
  grid-row-start: 5;
  grid-row-end: 6;
  background: #ADFF2F;
}

<div class="container">
  <div class="item1">1 - Dark brown</div>
  <div class="item2">2 - Bluish gray Gray</div>
  <div class="item3">3 - Dark grey</div>
  <div class="item4">4 - Warm grayish</div>
  <div class="item5">5 - Gold (test)</div>
  <div class="item6">6 - Hot pink (test)</div>
  <div class="item7">7 - Green/Yellow (test)</div>
</div>

Solution

1) Change grid-template-row and grid-template-column to grid-template-rows and grid-template-columns -- none of your sizing will work until you change those.

2) Add overflow : auto ; to each of your item CSS rules. That will give you scrollbars if you need them, and will hide scrollbars if you don't.