KE_grid-overflow

by sthag

HTML

<div class="wrap">
  <div class="oynew-content-border inventory-view">
    <div class="stats">Hallo Statistik</div>
    <div class="lists">
      <div>
        <p>Lagerorte</p>
        <ul>
          <li>Lagerort 1</li>
          <li>Lagerort 2</li>
          <li>Lagerort 3</li>
          <li>Lagerort ABC</li>
          <li>Lagerort ABC</li>
          <li>Lagerort ABC</li>
          <li>Lagerort ABC</li>
          <li>Lagerort ABC</li>
          <li>Lagerort ABC</li>
          <li>Lagerort ABC</li>
          <li>Lagerort ABC</li>
          <li>Lagerort ABC</li>
          <li>Lagerort ABC</li>
          <li>Lagerort ABC</li>
          <li>Lagerort ABC</li>
          <li>Lagerort ABC</li>
          <li>Lagerort ABC</li>
          <li>Lagerort ABC</li>
        </ul>
      </div>
      <div>
        <p>Lager</p>
        <ul>
          <li>Lager</li>
          <li>Lager</li>
          <li>Lager</li>
          <li>Lager</li>
          <li>Lager</li>
          <li>Lager</li>
          <li>Lager</li>
          <li>Lager</li>
          <li>Lager</li>
          <li>Lager</li>
          <li>Lager</li>
          <li>Lager</li>
          <li>Lager</li>
          <li>Lager</li>
          <li>Lager</li>
          <li>Lager</li>
          <li>Lager</li>
          <li>Lager</li>
          <li>Lager</li>
          <li>Lager</li>
          <li>Lager</li>
          <li>Lager</li>

          <li>Lager</li>
          <li>Lager</li>
          <li>Lager</li>
          <li>Lager</li>
          <li>Lager</li>
          <li>Lager</li>
          <li>Lager</li>
        </ul>
      </div>
      <div>
        <p>Lagerplätze</p>
        <ul>
          <li>Lagerplatz</li>
          <li>Lagerplatz</li>
          <li>Lagerplatz</li>
          <li>Lagerplatz</li>
          <li>Lagerplatz</li>
          <li>Lagerplatz</li>
          <li>Lagerplatz</li>
          <li>Lagerplatz</li>
          <li>Lagerplatz</li>
         ...

CSS

html,
body {
  height: 100%;
  margin: 0;
  padding: 0;
}

.wrap {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
}

.inventory-view {
  display: flex;
  flex-flow: column nowrap;
  flex: 1;
  height: 100%;
}

.stats {
  background-color: peachpuff;
  height: 5%;
}

.lists {
  flex: 1;
  display: grid;
  /*grid-template-areas: "a a" "b c";*/
  grid-template-columns: repeat(2, 1fr);
  grid-template-rows: 1fr 2fr;
  gap: 8px;
  height: 95%;
  background-color: paleturquoise;
}

.lists > div {
  overflow-y: auto;
}

.lists > div:first-child {
  grid-column: span 2 / span 2;
  background-color: aquamarine;
}

.lists > div:nth-child(2) {
  /*grid-area: 'b';*/
}

.lists > div:nth-child(3) {
  /*grid-area: 'c';*/
}

ul > li {
  margin-bottom: 4px;
  line-height: 2;
  background-color: seashell;
}