Баланс объектов по двум столбцам с использованием счетчика столбцов CSS: 2 в Chrome

Question

Я создал решение для панели мониторинга, в котором объекты с постоянно меняющейся высотой располагаются в два столбца. Цель состоит в том, чтобы распределить объекты по столбцам следующим образом:

1. Первый объект идет вверху слева в первом столбце
2. Следующий объект располагается ниже этого объекта, если только на нем недостаточно места, чтобы поместиться на всю высоту объекта, если объект не помещается, поместите его во второй столбец.
3. Если объект не помещается в свободное пространство во втором столбце, распределите объекты по столбцам, чтобы получить два столбца одинаковой высоты и сделать прокрутку контейнера div.

Объекты не имеют фиксированной высоты, объект может быть пустым в понедельник и занимать весь левый столбец во вторник.

Я создал следующее:

<div id='container'>
  <div id='columncontainer'>
    <span id='span1'>Block1</span>
    <span id='span2'>Block2</span>
    <span id='span3'>Block3</span>
  </div>
</div>

.

#container{
  overflow-y: auto;
  height: 300px;
  width: 400px;
}

#columncontainer {
  column-count: 2;
}

#columncontainer > span {
  width: 100%;
  display: inline-block;
}

#span1 {
  height: 200px;
  width: 200px;
}

#span2 {
  height: 200px;
  width: 200px;
}

#span3 {
  height: 50px;
  width: 200px;
}

Проблема, с которой я столкнулся при решении, демонстрируется здесь и возникает в браузере Chrome: https://jsfiddle.net/3620qgvs/

В этом примере два последних объекта в столбцах легко поместятся во втором столбце (200 + 50 = 250 <300). </p>

Однако первые два объекта отображаются в первом столбце, и # span2 высотой 50px имеет все 300px второго столбца для себя.

Я хочу сохранить объекты вместе, поэтому использование блока вместо встроенного блока не вариант. (Это разбивает объекты на две колонки)

Мои реализации, в которых я пробовал размещать объекты на (плавающих) линиях или (гибких) сетках, имели одну и ту же проблему; если в левом столбце есть два объекта большой высоты, два объекта небольшой высоты в правом столбце будут иметь много вертикальных пробелов между ними (пробел между блоками 2 и 4 показан здесь: https://jsfiddle.net/3kd9r8ye/2/). Thats почему я использую счетчик столбцов, так как он будет работать как «float: down» (которого не существует)

Какие-нибудь решения или альтернативные подходы?

Answer 1

Оказывается, что в свойствах CSS Chrome значения "сироты" и "вдовы" по умолчанию установлены равными 2, тогда как другие браузеры, похоже, поддерживают значение 1.

Чтобы исправить проблему, которую я описал, необходимо добавить следующие свойства CSS в #columncontainer:

orphans: 1
widows: 1

Это предотвратит попытку Chrome придерживаться одного столбца.

Для дальнейшей справки:

• https://bugs.chromium.org/p/chromium/issues/detail?id=638530
• https://drafts.csswg.org/css-break/#widows-orphans
• https://drafts.csswg.org/css-break/#unforced-breaks

Выдержка из drafts.csswg.org:

If a block contains fewer lines than the value of widows or orphans, the rule simply becomes that all lines in the block must be kept together.

Answer 2

Это распространенная проблема, наблюдаемая в свойстве column-count. Для вашей проблемы вы можете использовать следующее решение, которое отлично работает с очень немногими css changes, а также я заметил, что в вашем вопросе вы дублировали идентификатор элемента, который приводит ваш HTML к недействительному. Так что избегайте этого в будущем, работайте с css classes.

#container {
  overflow-y: auto;
  height: 300px;
  width: 400px;
  border: 1px solid black;
}

#columncontainer {
  /* column-count: 2;*/
  border: 1px solid red;
  width: 100%;
}

#columncontainer>span {
  /*width: 100%;*/
  display: inline-block;
  background-color: #CCCC;
  margin: 5px;
  border: 1px solid blue;
  width: calc(50% - 15px);
}

.block1,
.block2 {
  height: 200px;
  width: 200px;
}

.block3 {
  height: 50px;
  width: 200px;
}

<div id='container'>

  <div id='columncontainer'>
    <span id='span1' class="block1">Block1</span>
    <span id='span2' class="block2">Block2</span>
    <span id='span3' class="block3">Block3</span>
  </div>

</div>