css grid with background - scroll when grid is bigger than the background - css

Question

I have a table that can grow, once it grows it can push the grid height to be larger than the background.
I want that the grid itself will have a scroll on top of the background.
I tried to use overflow but did not succeed.
you can see the problem here
here is the relevant code:
.wrapper {
background-repeat: no-repeat;
background-position: top center;
height: 1024px;
min-width: 1055px;
display: grid;
grid-template-columns: 0.1fr 2.8fr 0.1fr;
grid-gap: 10px;
grid-template-rows: 100px auto auto 100px;
font-family: 'roboto',sans-serif;
overflow:visible;
/*grid-auto-rows: minmax(100px, auto);*/
/*border: 1px solid;*/
}
.wrapper > div {
display: flex;
justify-content: center;
/* align-items: center; */
font-size: 16px;
font-weight: 400;
/* border: solid 1px; */
color: #39393ac7 /*#39393A*/;
}
.header {
grid-column: 2 ;
}
.herbTable {
grid-column: 2 ;
}
.chart {
grid-column: 2 ;
}
.footer {
grid-column: 1 / -1 ;
grid-row: 4;
}
#media screen and (max-width : 1439px) /*and (max-width : 1439px) */
{
.wrapper {
background-image: url("~/static/bg1440px.jpg");
background-size: cover;
/* background-size: 1024px; */
/* width: 1024px; */
}
}
#media screen and (min-width : 1440px)
{
.wrapper {
background-image: url("~/static/bg1440px.jpg");
background-size: 1440px auto;
/* height: 1024px; */
width: 1440px;
}
}
<template>
<div class="wrapper">
<appHeader class="header"></appHeader>
<loading :active.sync="isLoading" :can-cancel="false"></loading>
<appHerbsTable v-if="!isLoading" class="herbTable"></appHerbsTable>
<appChart v-if="!isLoading" class="chart">chart</appChart>
<div class="footer"></div>
</div>
</template>

Answer 1

.wrapper {
/* overflow: visible; */
overflow: auto; /* NEW */
}

Answer 2

As you have fixed column widths this should be pretty easy changing your css to:
.herbTable thead {
display: block; /*inline-block should also be ok*/
}
.herbTable tbody {
display: block;
max-height: 300px;
overflow-y: scroll;
}
.. you will have to modify your td widths to make this look nice again
EDIT: (I hope I finally understand what you mean by grid)
html {
height: 100%;
}
body {
height: 100%;
box-sizing: border-box;
padding: 8px;
margin: 0;
}
.wrapper {
height: 100%;
overflow-y: auto;
}
.. hope this helps ..