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 div的.child来完成，然后他们只会采用内容的宽度，当然您还需要制作你的img响应：

＆＃13;

＆＃13;

#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 */
}

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;