Почему в хроме блоки внутри display flex и height 100% растягиваются на всю высоту?

Question

[Андрей]

Исходная информация: блок-родитель имеет высоту в пикселях. Внутри него блок с высотой 100% и display flex. Внутри него содержатся элементы с шириной в процентах. Элементы не влезающие в строку переносятся на новую строку с помощью wrap

Проблема вот в чем - если элементов больше чем на одну строку, то всё работает ожидаемо - элементы идут друг за дружкой как кирпичики. Если все элементы влезают в одну строку, то в firefox они работают как ожидалось, а в хроме и других браузерах элементы растягиваются на всю высоту родителя. Почему так, и как сделать, чтобы работало как в firefox?

Примеры:
Элементы влезают в одну строку https://jsfiddle.net/wz09gsh6/16/

В Firefox

В Chrome

Элементы не влезают в одну строку раз и два

Firefox

Chrome

Answer 1

[Андрей]

Решение оказалось не сложным: добавить к элементам

align-self: flex-start;