svg inside scroll div has a bottom gutter

Question

 .wrapper {
    width: 100px;
    height: 100px;
    overflow: auto;
    background: red;
}

.inner {
    width: 300px;
    height: 150px;
    background: blue;
}

<div class="wrapper">
    <svg class="inner"></svg>
</div>
<div class="wrapper">
    <div class="inner"></div>
</div>

see the demo above.

when scroll to the bottom, there is a red gutter which is the background of wrapper in case 1 and case 2 works fine.

Does anyone knows why and how to fix it?

Answer 1

The SVG is an image, so it behaves like any <image> and sits on the text baseline. So the space you are seeing is the space left below the text baseline for descenders etc.

To fix, just make the SVG display: block.

The second version works fine because <div>s are already display: block.

.wrapper {
    width: 100px;
    height: 100px;
    overflow: auto;
    background: red;
}

.inner {
    display: block;
    width: 300px;
    height: 150px;
    background: blue;
}

<div class="wrapper">
    <svg class="inner"></svg>
</div>
<div class="wrapper">
    <div class="inner"></div>
</div>

Answer 2

seems duplicate with this question

add display: block; to the svg element could solve the problem