Please, note that not all prefixers work the same way, so there's known issues on every prefixer that puts you in need to manually add some vendor prefix. Don't rely on blind-trusting on prefixers or automated software unless you checked it works hundred percent in your project.
For detailed flex bugs, please refer:
https://caniuse.com/#feat=flexbox
https://github.com/philipwalton/flexbugs
As Joseph Hansen pointed out, including width property as third param on flex declaration is the desired workaround for flex and it should fix most of issues derived from merging flex with some declarations.
But this doesn't solve all issues on safari, or even other browsers; it sometimes will depend on childrens or some other property; in the example below, you'll see the middle box growing more than usual, even when all three elements are supposed to keep same width ON SAFARI.
If you use chrome, it will look pretty nice.
This is not a flex issue but a display interpreter one. Simply removing display: inline-table will fix the issue for safari, but, with more child elements, it will make all cards grow in height, so we'll need to fix this other behaviour derived from switching to another display property.
.flexrow {
display: -webkit-flex;
display: flex;
flex-flow: row wrap;
flex-direction: row;
-webkit-flex-wrap: wrap;
flex-wrap: wrap;
margin: 0px -15px;
}
.card-container {
display: inline-table;
}
div.card-container {
-webkit-flex: 0 1 calc(33.3333% - 30px);
flex: 0 1 calc(33.3333% - 30px);
margin: 15px;
}
.card-container {
background:green;
}
<div class="flexrow">
<div class="card-container">
<div class="card">
<p class="title">
test test test
</p>
</div>
</div>
<div class="card-container">
<div class="card">
<p class="title">
test testtesttest test test test
</p>
</div>
</div>
<div class="card-container">
<div class="card">
<p class="title">
test test
</p>
</div>
</div>
</div>
this is only an example but i suggest to check every property that have boundaries with flexbox (i.e. display, position and more).
Here the working example:
.flexrow {
display: -webkit-flex;
display: flex;
flex-flow: row wrap;
flex-direction: row;
-webkit-flex-wrap: wrap;
flex-wrap: wrap;
margin: 0px -15px;
}
.card-container {
// display: inline-table;
}
div.card-container {
-webkit-flex: 0 1 calc(33.3333% - 30px);
flex: 0 1 calc(33.3333% - 30px);
margin: 15px;
}
.card-container {
background:green;
}
<div class="flexrow">
<div class="card-container">
<div class="card">
<p class="title">
test test test
</p>
</div>
</div>
<div class="card-container">
<div class="card">
<p class="title">
test testtesttest test test test
</p>
</div>
</div>
<div class="card-container">
<div class="card">
<p class="title">
test test
</p>
</div>
</div>
</div>
