svg里面的滚动div有一个底部排水沟

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>

参见上面的演示。

滚动到底部时，有一个红色的水槽，它是案例1中wrapper的背景，案例2工作正常。

有谁知道为什么以及如何解决它？

Answer 1

SVG是一个图像，因此它的行为与任何<image>相同，并且位于文本基线上。因此，您看到的空间是下方等文本基线下方的空间。

要修复，只需制作SVG display: block。

第二个版本正常，因为<div>已经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

似乎与this question

重复

将display: block;添加到svg元素可以解决问题