page-break-inside: элемент исключения и уровня блока создает пустой столбец в Chrome

Question

В этой скрипте https://jsfiddle.net/rpep00dg/7/ содержимое добавляется пустым столбцом в Chrome. Если вы откроете скрипт в Firefox или Safari, перед «заголовком» нет пустой колонки. Это похоже на тот случай, если первым элементом является любой элемент уровня блока, такой как тег p.

Является ли это ошибкой Chrome, которая документирована в любом месте? Также есть ли обходные пути, чтобы они отображались как Firefox и Safari?

section { 
 
    page-break-inside: avoid; 
 
    margin-bottom: 10px; 
 
} 
 

 
html { 
 
    height: 100%; 
 
} 
 

 
body { 
 
    column-count: 2; 
 
    column-gap: 36px; 
 
    width:100%; 
 
    height: 100%; 
 
    column-fill: auto; 
 
}

<section> 
 
<h1>Header</h1> 
 
<section> 
 
lsdkfj sljfsdl fdsljfs;lkafjslf sa;lfjsl flsdkfj sljfsdl fdsljfs;lkafjslf sa;lfjsl flsdkfj sljfsdl fdsljfs;lkafjslf sa;lfjsl flsdkfj sljfsdl fdsljfs;lkafjslf sa;lfjsl flsdkfj sljfsdl fdsljfs;lkafjslf sa;lfjsl flsdkfj sljfsdl fdsljfs;lkafjslf sa;lfjsl flsdkfj sljfsdl fdsljfs;lkafjslf sa;lfjsl f 
 
</section> 
 
<section> 
 
lsdkfj sljfsdl fdsljfs;lkafjslf sa;lfjsl flsdkfj sljfsdl fdsljfs;lkafjslf sa;lfjsl flsdkfj sljfsdl fdsljfs;lkafjslf sa;lfjsl flsdkfj sljfsdl fdsljfs;lkafjslf sa;lfjsl flsdkfj sljfsdl fdsljfs;lkafjslf sa;lfjsl flsdkfj sljfsdl fdsljfs;lkafjslf sa;lfjsl flsdkfj sljfsdl fdsljfs;lkafjslf sa;lfjsl f 
 
</section><section> 
 
lsdkfj sljfsdl fdsljfs;lkafjslf sa;lfjsl flsdkfj sljfsdl fdsljfs;lkafjslf sa;lfjsl flsdkfj sljfsdl fdsljfs;lkafjslf sa;lfjsl flsdkfj sljfsdl fdsljfs;lkafjslf sa;lfjsl flsdkfj sljfsdl fdsljfs;lkafjslf sa;lfjsl flsdkfj sljfsdl fdsljfs;lkafjslf sa;lfjsl flsdkfj sljfsdl fdsljfs;lkafjslf sa;lfjsl f 
 
</section><section> 
 
lsdkfj sljfsdl fdsljfs;lkafjslf sa;lfjsl flsdkfj sljfsdl fdsljfs;lkafjslf sa;lfjsl flsdkfj sljfsdl fdsljfs;lkafjslf sa;lfjsl flsdkfj sljfsdl fdsljfs;lkafjslf sa;lfjsl flsdkfj sljfsdl fdsljfs;lkafjslf sa;lfjsl flsdkfj sljfsdl fdsljfs;lkafjslf sa;lfjsl flsdkfj sljfsdl fdsljfs;lkafjslf sa;lfjsl f 
 
</section><section> 
 
lsdkfj sljfsdl fdsljfs;lkafjslf sa;lfjsl flsdkfj sljfsdl fdsljfs;lkafjslf sa;lfjsl flsdkfj sljfsdl fdsljfs;lkafjslf sa;lfjsl flsdkfj sljfsdl fdsljfs;lkafjslf sa;lfjsl flsdkfj sljfsdl fdsljfs;lkafjslf sa;lfjsl flsdkfj sljfsdl fdsljfs;lkafjslf sa;lfjsl flsdkfj sljfsdl fdsljfs;lkafjslf sa;lfjsl f 
 
</section><section> 
 
lsdkfj sljfsdl fdsljfs;lkafjslf sa;lfjsl flsdkfj sljfsdl fdsljfs;lkafjslf sa;lfjsl flsdkfj sljfsdl fdsljfs;lkafjslf sa;lfjsl flsdkfj sljfsdl fdsljfs;lkafjslf sa;lfjsl flsdkfj sljfsdl fdsljfs;lkafjslf sa;lfjsl flsdkfj sljfsdl fdsljfs;lkafjslf sa;lfjsl flsdkfj sljfsdl fdsljfs;lkafjslf sa;lfjsl f 
 
</section><section> 
 
lsdkfj sljfsdl fdsljfs;lkafjslf sa;lfjsl flsdkfj sljfsdl fdsljfs;lkafjslf sa;lfjsl flsdkfj sljfsdl fdsljfs;lkafjslf sa;lfjsl flsdkfj sljfsdl fdsljfs;lkafjslf sa;lfjsl flsdkfj sljfsdl fdsljfs;lkafjslf sa;lfjsl flsdkfj sljfsdl fdsljfs;lkafjslf sa;lfjsl flsdkfj sljfsdl fdsljfs;lkafjslf sa;lfjsl f 
 
</section><section> 
 
lsdkfj sljfsdl fdsljfs;lkafjslf sa;lfjsl flsdkfj sljfsdl fdsljfs;lkafjslf sa;lfjsl flsdkfj sljfsdl fdsljfs;lkafjslf sa;lfjsl flsdkfj sljfsdl fdsljfs;lkafjslf sa;lfjsl flsdkfj sljfsdl fdsljfs;lkafjslf sa;lfjsl flsdkfj sljfsdl fdsljfs;lkafjslf sa;lfjsl flsdkfj sljfsdl fdsljfs;lkafjslf sa;lfjsl f 
 
</section> 
 
</section>

Answer 1

Пара вопросов здесь:

Вы забыли закрыть section в вашей рубрике h1 тега. Закройте это, и он будет отлично работать в хроме.

Второе:

Учитывая следующие для конкретных браузеров:

-webkit-column-count: 2; /* Chrome, Safari, Opera */ 
-moz-column-count: 2; /* Firefox */ 
column-count: 2; /*Default 

Я тестировал выше кода, и она работает, как ожидалось.

Надеюсь, это поможет.