Количество столбцов CSS игнорируется в IE11

Question

Это проблема, с которой я столкнулся на своем сайте, я воссоздал проблему на js fiddle, я пытаюсь создать 5 столбцов, используя теги разделов с одинаковой шириной, используя количество столбцов, это прекрасно работает на chrome / firefox / edge, однако в Интернете Проводник 11 игнорируется и отображает разделы в виде блоков.

Я прочитал, что количество столбцов должно поддерживаться IE, поэтому очень сложно понять, почему его игнорируют, это ошибка или я что-то не так делаю? моя скрипка ниже

https://jsfiddle.net/gqdL46j4/

HTML

<main>
  <section>
    <h1>Test1</h1>
  </section>
  <section>
    <h1>Test2</h1>
  </section>
  <section>
    <h1>Test3</h1>
  </section>
  <section>
    <h1>Test4</h1>
  </section>
  <section>
    <h1>Test5</h1>
  </section>
</main>

CSS

main  {
   -webkit-column-count: 5;
   -moz-column-count: 5; 
   column-count: 5;
}

section {
  width: 100%;
  display:inline-block;
}

Answer 1

<main> Тег не поддерживается IE. Поддерживается только Firefox + Chrome + Edge:

https://developer.mozilla.org/en-US/docs/Web/HTML/Element/main

Вот почему он не работает со столбцами.

Answer 2

Я только что попытался заменить основной тег на div, и теперь он работает, есть ли причина, по которой он не будет работать с основным тегом?

https://jsfiddle.net/gqdL46j4/3/

<div>
  <section>
    <h1>Test1</h1>
  </section>
  <section>
    <h1>Test2</h1>
  </section>
  <section>
    <h1>Test3</h1>
  </section>
  <section>
    <h1>Test4</h1>
  </section>
  <section>
    <h1>Test5</h1>
  </section>
</div>