Я пытаюсь создать адаптивный макет, где верхний и нижний колонтитулы занимают около 5% экрана и исправлены. Средняя часть прокручивается в зависимости от количества элементов в ней. Хотя я упоминаю только значения fr и%, размеры элементов остаются неизменными c независимо от изменения размера экрана. В режиме реагирования firefox (galaxy s9) я вижу вертикальные и горизонтальные полосы прокрутки вне класса контейнера. Может ли кто-нибудь указать, что я могу делать неправильно? 
<html>
<head>
<meta charset="UTF-8">
<style>
.main{
display:grid;
grid-template-rows: 2fr 20fr 2fr;
gap: 2px;
}
.header{
background-color: lightblue
}
.container{
display: grid;
overflow: auto;
grid-auto-flow: row;
grid-auto-rows: 25%;
gap: 2px;
}
.tapbar{
background-color: pink
}
.content{
background-color:yellowgreen;
}
</style>
</head>
<body>
<div class='main'>
<div class='header'>header here</div>
<div class='container'>
<div class="content">1</div>
<div class="content">2</div>
<div class="content">3</div>
<div class="content">4</div>
<div class="content">5</div>
</div>
<div class='tapbar'>tap bar here</div>
</div>
</body>
Редактировать: Помимо выбранного ответа, другая ошибка, которую я делал, не имела html охватывает всю область. Добавление этого к стилю исправило это
html,body,.main{
height: 100%;
width: 100%;
margin: 0;
padding: 0;
overflow: hidden;
}