Прорыв: избегать игнорируется Firefox

Question

Я пытаюсь заставить следующий стиль, который должен предотвращать разрыв столбцов, корректно работать на Firefox. Он отображает то, что я ожидал, в Chrome.

S CSS:

div {
  column-width: 100px;

  section {
    display: block;
    break-inside: avoid;
    width: 100%;
  }
}

Пример HTML:

<div>
  <section>
    <header>
      <a>First Column</a>
    </header>
    <ul>
      <li><a>Item 1</a></li>
      <li><a>Item 2</a></li>
      <li><a>Item 3</a></li>
    </ul>
  </section>
  <section>
    <header>
      <a>Second Column</a>
    </header>
    <ul>
      <li><a>Item 1</a></li>
      <li><a>Item 2</a></li>
      <li><a>Item 3</a></li>
      <li><a>Item 4</a></li>
      <li><a>Item 5</a></li>
    </ul>
  </section>
  <section>
    <header>
      <a>Third Column</a>
    </header>
    <ul>
      <li><a>Item 1</a></li>
      <li><a>Item 2</a></li>
    </ul>
  </section>
</div>

Chrome делает это, как показано ниже. Это желаемое поведение:

Firefox не учитывает break-inside: avoid, как показано ниже:

Если я изменю отображение с block на inline-block, он будет отображаться желаемым образом в Firefox, но больше не будет работать в Chrome. Мне даже не нужно использовать break-inside: avoid для Firefox, чтобы получить желаемое поведение. Посмотрите способ рендеринга Chrome с inline-block ниже:

Что CSS можно использовать, чтобы иметь Chrome и Firefox производить желаемое поведение? Я мог бы использовать Flexbox, я предпочитаю способ обработки размеров страницы при этом. Я также предпочел бы не взламывать что-либо, использующее другой стиль, в зависимости от используемого браузера.

JSFiddle здесь: https://jsfiddle.net/Lznt2xpy/1/