css grid with background - прокрутка, когда сетка больше фона

Question

У меня есть таблица, которая может расти, когда она растет, она может выдвинуть высоту сетки больше, чем фон. Я хочу, чтобы сама сетка имела прокрутку поверх фона. Я пытался использовать переполнение, но не удалось.

Вы можете увидеть проблему здесь

вот соответствующий код:

.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

Поскольку вы установили фиксированную ширину столбцов, это должно быть довольно легко изменить ваш CSS на:

.herbTable thead {
  display: block; /*inline-block should also be ok*/
}
.herbTable tbody {
  display: block;
  max-height: 300px;
  overflow-y: scroll;
}

.. вам придется изменить ширину тд, чтобы снова это выглядело красиво

РЕДАКТИРОВАТЬ: (Надеюсь, я наконец понял, что вы подразумеваете под сеткой)

html {
  height: 100%;
}
body {
  height: 100%;
  box-sizing: border-box;
  padding: 8px;
  margin: 0;
}
.wrapper {
  height: 100%;
  overflow-y: auto;
}

.. надеюсь это поможет..