Flexbox is not side by side on Safari - safari

Question

I am trying to put the divs side by side with flexbox, but on safari for mac is not working.
Chrome, Firefox, Edge and Internet Explorer 11 it is working.
Someone can help me? hehe
all browsers
safari
It looks like the white block has box-sizing: content-box, but it does not have...
Does anyone know why?
The code: fiddle
.flex {
display: -ms-flexbox; /* TWEENER - IE 10 */
display: -webkit-flex; /* NEW - Chrome */
display: flex;
-webkit-flex-wrap: wrap;
flex-wrap: wrap;
}
.box-full {
width: 100%;
border-radius: 3px;
background-color: #fff;
box-shadow: 0 2px 20px 0 rgba(0,0,0,0.08);
margin-bottom: 34px;
}
.box-fridge {
&:last-of-type {
margin-bottom: 40px;
}
.block-left {
padding: 21px 22px;
flex-grow: 2;
}
.block-right {
border-radius: 0 3px 3px 0;
background-color: #4681A8;
max-width: 190px;
flex-grow: 1;
}
.title-fridge {
font-size: 24px;
font-weight: 500;
line-height: 29px;
}
.desc {
font-size: 12px;
font-weight: 300;
line-height: 15px;
margin-top: 17px;
}
.block {
align-self: center;
color: #fff;
flex: 1 1 auto;
}
.price {
font-size: 24px;
line-height: 29px;
}
.period {
font-size: 10px;
line-height: 12px;
margin-top: 6px;
text-transform: uppercase;
}
}