CSS grid layout: force fixed layout

I made the following grid layout (for an upcoming email client):

body
{
  margin:0px;
  font-family:tahoma;
  font-size:12px;
}

.grid-container {
  display: grid;

  grid-template-areas:
    "header header header"
    "mailboxes messages messages"
    "mailboxes viewer viewer"
    "footer footer footer";

  grid-template-columns: 200px 1fr;
  grid-template-rows: 34px 1fr 30% 34px;
  grid-template-rows: 34px 1fr 70% 34px;
  grid-gap: 0px;

  height: 100vh;
}

.header {
  grid-area: header;
  background:#aaa;
}

.mailboxes
{
  grid-area: mailboxes;
  background:#ccc;
}

.footer
{
  grid-area: footer;
  background:#aaa;
}

.gMessages
{
  grid-area: messages;
  background:#bbb;
}

.viewer
{
  grid-area: viewer;
  background:white;
}

    <div class="grid-container">
        <div class="header">header</div>
        <div class="mailboxes">mailboxes</div>
        <div class="footer">footer</div>

        <div class="gMessages">
          messages
        </div>

        <div class="viewer">
        </div>
    </div>

Also see here: https://jsfiddle.net/w4m1psnh/4/

It is responsive and everything is fine. The problem is - when filling data into the messages Area (.gMessages), the area will enlarge and destroy my layout:

It also enlargens the page so that the footer will become invisible. I couldn't find out how to keep the area in its fixed height and also keeping the whole layout responsive (messages: 30% height, viewer 70% height). I also tried assigning a fixed height and applying overlay-y to the Message content - without success. So how would i force the grid layout to keep its assigned dimensions?

Solution

You have 2 declarations for the same property here:

grid-template-rows: 34px 1fr 30% 34px;
grid-template-rows: 34px 1fr 70% 34px;

The first one will be ignored. So assuming you want the top section to be 30%, keep second one.

Now we need to fix the overflow issue.

Add overflow-y: auto to .viewer and .gMessages

You will end up with this:

<!DOCTYPE html>
<html>

<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, shrink-to-fit=no">
<title>TITLE</title>
<style>
    body
    {
      margin:0px;
      font-family:tahoma;
      font-size:12px;
    }

    .grid-container {
      display: grid;

      grid-template-areas:
        "header header header"
        "mailboxes messages messages"
        "mailboxes viewer viewer"
        "footer footer footer";

      grid-template-columns: 200px 1fr;
      grid-template-rows: 34px 1fr 30% 34px;
      grid-gap: 0px;

      height: 100vh;
    }

    .header {
      grid-area: header;
      background:#aaa;
    }

    .mailboxes
    {
      grid-area: mailboxes;
      background:#ccc;
    }

    .footer
    {
      grid-area: footer;
      background:#aaa;
    }

    .gMessages
    {
      grid-area: messages;
      background:#bbb;
      overflow-y: auto;
    }

    .viewer
    {
      overflow-y: auto;
      grid-area: viewer;
      background:white;
    }
</style>
</head>

<body>
    <div class="grid-container">
        <div class="header">header</div>
        <div class="mailboxes">mailboxes</div>
        <div class="footer">footer</div>

        <div class="gMessages">
          messages<br/>
          messages<br/>
          messages<br/>
          messages<br/>
          messages<br/>
          messages<br/>
          messages<br/>
          messages<br/>
          messages<br/>
          messages<br/>
          messages<br/>
          messages<br/>
          messages<br/>
          messages<br/>
          messages<br/>
          messages<br/>
          messages<br/>
          messages<br/>
          messages<br/>
          messages<br/>
          messages<br/>
          messages<br/>
          messages<br/>
          messages<br/>
          messages<br/>
          messages<br/>
          messages<br/>
          messages<br/>
          messages<br/>
          messages<br/>
          messages<br/>
          messages<br/>
          messages<br/>
          messages<br/>
          messages<br/>
          messages<br/>
          messages<br/>
          messages<br/>
          messages<br/>
          messages<br/>
          messages<br/>
          messages<br/>
          messages<br/>
          messages<br/>
          messages<br/>
          messages<br/>
          messages<br/>
          messages<br/>
          messages<br/>
          messages<br/>
          messages<br/>
          messages<br/>
          messages<br/>
          messages<br/>
          messages<br/>
          messages<br/>
          messages<br/>
          messages<br/>
          messages<br/>
          messages<br/>
          messages<br/>
          messages<br/>
          messages<br/>
          messages<br/>
          messages<br/>
          messages<br/>
          messages<br/>
          messages<br/>
          messages<br/>
          messages<br/>
          messages<br/>
          messages<br/>
          messages<br/>
          messages<br/>
          messages<br/>
          messages<br/>
          messages<br/>
          messages<br/>
          messages<br/>
        </div>

        <div class="viewer">
        </div>
    </div>
</body>
</html>