.container {
  font-size: 18px;
  font-family: sans-serif;
  display: grid;
  grid-gap: 4px;
  background-color: #ddd;
  grid-template-columns: repeat(7, 1fr);
  grid-auto-rows: none;
}


[class^='grid-content'] {
  overflow-y: scroll;
  position:relative;

  outline: 1px #f90 dashed;
  display: auto;
  background-color: goldenrod;
  align-items: center;
  justify-content: center;
  grid-template-rows: auto 1fr;
  grid-row: span 10;

  scrollbar-width: none; /* hide the scrollbar of the scrollable element */
}

.grid-title {
  position: relative;

  font-size: 20px;
  height: 12px;
}


.dragcontainer {
  margin: 40px;
  font-size: 21px;
  font-family: sans-serif;
  display: grid;
  grid-gap: 22px;
  background-color: #aaa;
  grid-template-columns: repeat(6, 1fr);
  grid-auto-rows: none;

  border: 5px solid blue

}
.grid-drag{
  height: 12px
  border: inherit

}

/* Create a custom scrollbar */
::-webkit-scrollbar {
  width: 10px;
}

::-webkit-scrollbar-track {
  background-color: #f1f1f1;
}

::-webkit-scrollbar-thumb {
  background-color: #888;
  border-radius: 5px;
}

::-webkit-scrollbar-thumb:hover {
  background-color: #555;
}



.stacked {
  display: grid;
}
.stacked >* {
  grid-column: 1 /2;
  grid-row: 1/2;
}


.parent {
    display: contents;
}


.item-title {
  background-color: #ddd;
  padding: 1px;
  grid-area: 1 / 1 / 2 / -1;
}

.item-content {
  grid-area: 2 / 1 / 3 / -1;
}