Flexbox reserves space for svg images that have been scaled - html

Question

I have a site header and I would like to use flexbox for this.
I use justify-content: space-between; to evenly divide the free space between the div's but when I add my svg and scale it down to the size of the header bar flexbox reserves the same amount of space as if the svg was displayed at 100%.
I made a example to show what I mean:
#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>
2
3
</div>
<br>
<div id="wrapper">
<div class="child">
<img src="https://picsum.photos/200/300/?random" height="100%" alt="">
</div>
2
3
</div>
And a JSiddle:
https://jsfiddle.net/03r8vzkn/6/
Is there a way I can avoid this or should I make the svg smaller? This feels a bit hacky because I don't want to make every svg the right size; the scalability is one of its biggest advantages.

Answer 1

You can do it with the display: inline-flex for the .child divs, then they will only take the content's width, of course you also need to make your imgs responsive:
#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>
2
3
</div>
<br>
<div id="wrapper">
<div class="child">
<img src="https://picsum.photos/300/400/?random" alt="">
</div>
2
3
</div>
<br>
<div id="wrapper">
<div class="child">
<img src="https://picsum.photos/200/300/?random" alt="">
</div>
2
3
</div>
<br>
<div id="wrapper">
<div class="child">
<img src="https://picsum.photos/100/200/?random" alt="">
</div>
2
3
</div>