javascript - css 溢出-y :auto not working in firefox and chrome

Question

我有以下代码

<div id="someDiv" style="float: right; margin-right: -350px; position: relative; overflow-x: hidden; overflow-y: auto;">
<svg class="someSvgClass" width="105">
<g>..</g>
<g>..</g>
...
</svg>
</div>

这个 div 包含在另一个具有固定高度的 div 中。这些“g”元素是使用 JavaScript 动态添加的。所以我希望当“g”元素的数量增加时出现滚动条

在 IE11 中，当“g”元素的数量很高时，我可以看到滚动条。但是对于相同数量的元素，我无法在 Firefox 和 chrome 中看到滚动条任何人请告诉我这里出了什么问题
这是一个样本 fiddle

Answer 1

我不是 SVG 专家，我从未使用过它，但似乎 SVG 不会改变高度。如果您将高度设置为 SVG，它会起作用:http://jsfiddle.net/u5ymhmht/7/

添加线条时在 js 中的实际解决方案，将线条的高度添加到 SVG。

附注抱歉之前的误会。

svg {
    height:500px;
}

#Someid {
    height: 150px;
    overflow-x: hidden;
    overflow-y auto;
}

<div id="Someid">
    <svg  width="105">
    <g transform="translate(10,5)">
            <text style="fill: black;" dy=".35em" y="5" x="15">asdsd</text>
        </g>
        <g transform="translate(10,20)">
            <text style="fill: black;" dy=".35em" y="5" x="15">asdsd</text>
        </g>
        <g transform="translate(10,35)">
        <text style="fill: black;" dy=".35em" y="5" x="15">asdsd</text>
        </g>
        <g transform="translate(10,50)">
            <text style="fill: black;" dy=".35em" y="5" x="15">asdsd</text>
        </g>
        <g transform="translate(10,65)">
        <text style="fill: black;" dy=".35em" y="5" x="15">asdsd</text>
        </g>
        <g transform="translate(10,80)">
            <text style="fill: black;" dy=".35em" y="5" x="15">asdsd</text>
        </g>
        
        <g transform="translate(10,95)">
        <text style="fill: black;" dy=".35em" y="5" x="15">asdsd</text>
        </g>
        <g transform="translate(10,110)">
            <text style="fill: black;" dy=".35em" y="5" x="15">asdsd</text>
        </g>
        
        <g transform="translate(10,125)">
        <text style="fill: black;" dy=".35em" y="5" x="15">asdsd</text>
        </g>
        <g transform="translate(10,140)">
            <text style="fill: black;" dy=".35em" y="5" x="15">asdsd</text>
        </g>
        
        <g transform="translate(10,155)">
        <text style="fill: black;" dy=".35em" y="5" x="15">asdsd</text>
        </g>
        <g transform="translate(10,170)">
            <text style="fill: black;" dy=".35em" y="5" x="15">asdsd</text>
        </g>
        <g transform="translate(10,185)">
        <text style="fill: black;" dy=".35em" y="5" x="15">asdsd</text>
        </g>
        <g transform="translate(10,200)">
            <text style="fill: black;" dy=".35em" y="5" x="15">asdsd</text>
        </g>
    </svg>
</div>