How to fix a bug in Safari with flexbox?

Question

css

Hello, I encountered such a problem, if there is no space for blocks in the container, then in the latest version of safari they do not jump to a new line, but tear the container. What is the reason?
Demo:
codepen.io/anon/pen/LbVMaN
In general, I took the implementation from here flexboxgrid.com

Answer 1

.col-auto {
    flex-grow: 1;
    flex-basis: initial; // Тут надо не 0, а initial, например. 
// Иначе сафари справедливо считает, что мин. размер блока нулевой, 
// так что переносить блоки не надо, они всё равно помещаются
    max-width: 100%;
    padding: 8px;
}

PS And .row does not need to be written `flex: 0 1 auto;`, unless it is. is not itself a child of a flex element.

Answer 2

Make it a rule to specify flex:0 1 auto (or your own values, of course) for elements, so as not to run into bugs later.

Answer 3

https://autoprefixer.github.io/en/ doesn't help you?