css overflow-y:auto not working in firefox and chrome

Question

I have the following code

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

This div contains inside another div with a fixed height.These "g" elements are added dynamically using JavaScript. So I expect a scroll bar when the no of "g" elements is increased

In IE11 I could able to see the scroll bar when the no of "g" elements are high. But for the same no of elements I was not able to see scroll bar in Firefox and in chrome anyone please tell me what is gone wrong here
here is a sample fiddle

Answer 1

I'm not an SVG expert, i never used it, but seems SVG doesn't change height. If you set height to the SVG it works: http://jsfiddle.net/u5ymhmht/7/

The practical solution in your js when you add a line, add height of the line to SVG.

ps Sorry for the previous misunderstanding.

 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>