Br не дружит с flexbox?

Верстал таблицу с помощью flexbox и заметил одну интересную особенность - элемент br ничего не может внутри flexbox.
Пример:
.flexbox { display: flex; flex-wrap: wrap; border: 2px solid red; padding: 2px; } .item { width: 50px; height: 50px; margin: 2px; border: 2px solid blue; } .new-row, br { display: block; width: 100%; height: 0px; }

Перенос с помощью div'a:

Перенос с помощью br:

В примере у div'а и br одни и те же свойства, но div переносит на новую строку элементы, а br - нет.
Почему?

Ответ

Реализация элемента br в CSS очень хорошо известна как тайна. Различные браузеры поддерживают различные свойства для этого элемента, с разным эффектом (хотя все они поддерживают display: none, чтобы удалить br из макета). Сам CSS признает эту странность еще в CSS1, выделив для неё целый подраздел, и даже сейчас в CSS3 он по-прежнему указан.
Эта особенность flexbox не новая; про неё было известно с 2014 года. В основном, в текущих реализациях, br не создаёт основной блок, а вместо этого рассматривается как часть непрерывного текста, как описано в разделе 4 спецификации Flexbox, создавая невидимый элемент, который не может быть стилизован (потому что он невидимый). Это похоже на элемент display: table-cell, вызывающий создание вокруг себя анонимной таблицы, не смотря на то, что вы можете по-прежнему стилизовать элемент display: table-cell - в случае br элемент. Свойства стиля, которые вы применяете, не имеют эффекта, а настройки невидимого элемент выставляются по-умолчанию.
В этом случае, поскольку br (в основном) пуст, и не имеет никакого свойства во flex'е, это приводит к невидимому элементу flex без каких-либо размеров и "прав", поэтому кажется, что br элемент полностью исчез.
Еще в 2014 году CSSWG эта тайна была решена не путем изменения спецификации Flexbox, а просто добавлением специального определения br для css-display-3 для учета поведения, которое мы наблюдаем. Но такое определение не существует в текущей версии спецификации, а также FPWD (который был опубликован после резолюции!), ни HTML-спецификации, ни где-либо еще. Тем не менее, определение выглядит так, как в текущей спецификации css-display-3 (которая не определяет никаких новых свойств, а просто изменяет определение display):
br { content: '\A'; display: contents; white-space: pre; }
...что означает, что элемент br не создаёт основной блок, а просто невидимый встроенный блок, содержащий одну новую строку.
Поскольку это определение по-прежнему отсутствует в css-display-3, я бы пока ещё не стал рассматривать его.
Ответ участника @BoltClock