CSS многоколоночный макет: <li>разрезать пополам при неравном количестве пользователей онлайн

Question

Итак, я пробую новую чат-комнату и хочу отобразить список пользователей в двух столбцах.Когда у меня в комнате два человека, <li> хорошо распределяется по двум колонкам.Однако, когда есть неравное количество li, я получаю следующую проблему.Может кто-нибудь взглянуть на мой код и посмотреть, что я сделал не так?

edit: я удалил column-fill: balance, но все равно ничего.

код SCSS

.first-main-column {
    .first-column-window {
      height: 700px;
      background-color: #ffffff;
      .user-container {
        height: 350px;
        width: 100%;
        overflow: auto;
        columns: 2;
        column-gap: 1em;
        column-rule: thin solid black;
        h2 {
          font-family: "Bebas Neue";
          column-span: all
        }
        .list {
          column-fill: balance;
          ul {
            li {
              width: 80%;
              border-radius: 5px;
              margin: 0 auto;
            }
          }
        }
      }

      .btn-container{
        width: 100%;
        height: 350px;
        button {
          margin: 5% 0;
          padding: 5%;
        }
      }
    }
  }

HTML-код

<div class="col-md-4 first-main-column">
        <div class="first-column-window w-80">
            <div class="user-container">
                <h2 class="p-2">User List</h2>
                <div class="list">
                    <ul class="list-group">
                        <li class="list-group-item my-2" *ngFor="let user of userList">
                            {{user}}
                        </li>
                    </ul>
                </div>
            </div>
            <div class="btn-container ">
                <button class="btn btn-block btn-lg btn-primary" (click)="joinRoom('general', chatWindow)">General Chat</button>
                <!-- House chat should be different with each house-->
                <button class="btn btn-block btn-lg btn-warning" (click)="joinRoom('house', chatWindow)">House Chat</button>
                <button class="btn btn-block btn-lg btn-danger" (click)="joinRoom('country', chatWindow)">Country Chat</button>
            </div>
        </div>
    </div>

Answer 1

Добавьте

display: inline-block;

к вашему стилю li.

.list {
    column-fill: balance;
    ul {
        li {
            width: 80%;
            border-radius: 5px;
            margin: 0 auto;
            display: inline-block;
        }
    }
}