flex div 内的 SVG 图像在 Safari 和 Chrome 中显示不同

Question

Chrome 包含 SVG，而 Safari 则让它拉伸到更大的尺寸。不知道我能做些什么来摆脱这种行为。

这是一支笔： https: //codepen.io/sashakevich/pen/boEPdb 在 Chrome 中它是完美的，在 Safari 中图像太大。

这是代码：

* {
  -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 的 Flex 收缩解决方案没有帮助 - Flexbox 中的 SVG 弄乱了其他元素的高度）（也许我遇到了 @michael_b 在这里建议的 Flex 项目的隐含最小尺寸：Why does not flex item Shrink过去的内容大小？但如果是的话，我不知道该怎么做才能让它表现出来。

Answer 1

看来min-height是.img-item造成这个问题的原因。将此更改为max-height可能会得到所需的结果。

* {
  -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;
  /*  justify-content: center; */
  /*  align-self: stretch; */
  padding: 25px 35px;
  min-height: 200px;
  /* position: relative; */
}

.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>