Where Chrome contains the SVG, Safari lets it stretch to a much larger size. Not sure what I can do to get rid of that behavior.
Here's a pen: https://codepen.io/sashakevich/pen/boEPdb In Chrome it's perfect, in Safari the images are too large.
And here's the code:
* {
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
.row {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: justify;
-ms-flex-pack: justify;
justify-content: space-between;
padding: 30px 10px;
}
.text-item {
-ms-flex-preferred-size: 200px;
flex-basis: 200px;
margin: 0 1.5%;
}
.img-item {
-ms-flex-preferred-size: 33%;
flex-basis: 33%;
margin: 0 1.5%;
-webkit-box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.4);
box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.4);
background: #fff;
border-radius: 3px;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
padding: 25px 35px;
min-height: 200px;
}
.img-item img {
width: 100%;
height: auto;
}<div class="row" style="background:#f1f1f1;">
<div class="text-item">
<p>A remake of their old logo of a kid holding a toothbrush.</p>
</div>
<div class="img-item">
<img src="https://www.simplylogos.net/wp-content/uploads/svg_port/sl-franklin-1.svg">
</div>
<div class="img-item">
<img src="https://www.simplylogos.net/wp-content/uploads/svg_port/sl-franklin-2.svg">
</div>
<div class="img-item">
<img src="https://www.simplylogos.net/wp-content/uploads/svg_port/sl-franklin-3.svg">
</div>
</div>
<div class="row" style="background:#e1e1e1;">
<div class="text-item">
<p>A remake of their old logo of a kid holding a toothbrush.</p>
</div>
<div class="img-item">
<img src="https://www.simplylogos.net/wp-content/uploads/svg_port/sl-mogtel-3.svg">
</div>
<div class="img-item">
<img src="https://www.simplylogos.net/wp-content/uploads/svg_port/sl-mogtel-1.svg">
</div>
<div class="img-item">
<img src="https://www.simplylogos.net/wp-content/uploads/svg_port/sl-mogtel-2.svg">
</div>
</div>@Steve-Schrab's flex shrink solution didn't help - SVG in flexbox messes up height of other elements) (Maybe I'm running into the Implied Minimum Size of Flex Items as suggested by @michael_b here: Why doesn't flex item shrink past content size? but if I am, I don't know what to do to make it behave.