How to fix the bug in Safari with flexbox?

Hello, faced such problem, if the container has no space for units, in Safari latest version, they do not jump to a new line, and tearing the container. What is the reason?

Demo:
codepen.io/anon/pen/LbVMaN

In General, the implementation was taken from here flexboxgrid.com
July 2nd 19 at 18:24
3 answers
July 2nd 19 at 18:26
Solution
.col-auto {
 flex-grow: 1;
 flex-basis: initial; // Here it is necessary not 0, and an initial, for example. 
// Otherwise, Safari rightly believes that the minimum size of the block is zero, 
// so that the transfer blocks are not necessary, they still fit
 max-width: 100%;
 padding: 8px;
}


PS And .row does not need to prescribe `flex: 0 1 auto;` if only he. he is not a child of the flex item.
July 2nd 19 at 18:28
The rule is to specify flex:0 1 auto(or their values, of course) for items, so you do not encounter bugs.
Thank you very much ) - nikita.Stracke commented on July 2nd 19 at 18:31
July 2nd 19 at 18:30
No, it is included. - nikita.Stracke commented on July 2nd 19 at 18:33

Find more questions by tags FlexboxSafariCSS