html - Go to new line when there is not enough height to display div without breaking?

Question

I have recreated an example on https://codepen.io/nikulasoskarsson/pen/qBaKyMK

Pretty much what I want is for the final row in the first column to simply go to a new line instead of breaking the content between two lines like it does automatically. Though display:block would work but it does not do the trick.

.list {
  width: 1000px;
  margin: 0 auto;
  column-count: 8;
  column-gap: 20px;
  max-height: 800px;
  overflow-y: auto;

  &__col {
    display: block;
    background: #444;
    margin: 8px 0;
    border: 1px solid #444;
    height: 50rem;
    width: 100%;
  }
  &__row {
    border: 1px solid #fff;
    color: #fff;
    display: block;
 

    &-heading {
   
    }
  }
}

Answer 1

等待大神答复