Flexbox 为已缩放的 svg 图像保留空间

Question

我有一个网站标题，我想为此使用 flexbox。
我使用justify-content: space-between; 来平均划分 div 之间的可用空间，但是当我添加我的 svg 并将其缩小到标题栏的大小时，flexbox 保留的空间量与 svg 以 100% 显示时相同。

我举了一个例子来说明我的意思：

#wrapper {
  width: 700px;
  height: 100px;
  display: flex;
  justify-content: space-between;
  background: blue;
}

.child {
  flex: content;
  background: red;
}

<div id="wrapper">
  <div class="child">
    <img src="https://s.cdpn.io/3/kiwi.svg" height="100%" alt="">
  </div>
  <a href="#" class="child">2</a>
  <a href="#" class="child">3</a>
</div>
<br>
<div id="wrapper">
  <div class="child">
    <img src="https://picsum.photos/200/300/?random" height="100%" alt="">
  </div>
  <a href="#" class="child">2</a>
  <a href="#" class="child">3</a>
</div>

还有一个 JSiddle： https://jsfiddle.net/03r8vzkn/6/

有没有办法可以避免这种情况，或者我应该使 svg 更小？这感觉有点 hacky，因为我不想让每个 svg 的大小都合适；可扩展性是其最大的优势之一。

Answer 1

您可以使用display: inline-flex 为.child div 做到这一点，那么它们只会占用内容的宽度，当然您还需要使您的imgs 响应：

#wrapper {
  width: 700px;
  height: 100px;
  display: flex;
  justify-content: space-between;
  background: blue;
}

.child {
  display: inline-flex; /* only takes the content's width */
  background: red;
}

img {
  display: block; /* removes bottom margin/whitespace */
  max-width: 100%; /* horizontally responsive */
  max-height: 100vh; /* vertically responsive */
}

<div id="wrapper">
  <div class="child">
    <img src="https://s.cdpn.io/3/kiwi.svg" alt="">
  </div>
  <a href="#" class="child">2</a>
  <a href="#" class="child">3</a>
</div>
<br>
<div id="wrapper">
  <div class="child">
    <img src="https://picsum.photos/300/400/?random" alt="">
  </div>
  <a href="#" class="child">2</a>
  <a href="#" class="child">3</a>
</div>
<br>
<div id="wrapper">
  <div class="child">
    <img src="https://picsum.photos/200/300/?random" alt="">
  </div>
  <a href="#" class="child">2</a>
  <a href="#" class="child">3</a>
</div>
<br>
<div id="wrapper">
  <div class="child">
    <img src="https://picsum.photos/100/200/?random" alt="">
  </div>
  <a href="#" class="child">2</a>
  <a href="#" class="child">3</a>
</div>