I am currently working on a responsive layout where the header and footer should each take up around 5% of the screen space and remain fixed. The middle section should scroll based on the number of elements within it. Despite using the fr and % values, the element sizes are not changing with varying screen sizes. When viewing in Firefox's responsive mode (Galaxy S9), I notice vertical and horizontal scroll bars outside of the container class. Can someone help me identify what I might be doing wrong?https://i.stack.imgur.com/Io5LY.png
<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>
Edit: Apart from the chosen answer, another mistake I was making was not ensuring that the html covered the entire area. Adding this to the style fixed the issue
html,body,.main{
height: 100%;
width: 100%;
margin: 0;
padding: 0;
overflow: hidden;
}