javascript - Why is the textarea in a d3 group changing position when new line is added? -

edit: if i'm setting ".style("overflow", "hidden")" doesn't happen. strange.

so problem, have added textarea foreignobject , foreignobject part of d3 group , when add new line textarea changes position. how can fix that? here can see i'm talking (hit 2 or 3 times enter) https://jsfiddle.net/jcbujyyg/2/

original code:

var svg = d3.select("body").append("svg") .attr("preserveaspectratio", "xminymin meet") .attr("viewbox", "0 0 960 600") .attr("width", "100%") .attr("height", "100%") .attr("style", "outline: thin solid black;") .style("background-color", "#f4f3f1");   var group = svg.append('g')     .datum({x: 0, y: 0});  group.append("rect")     .data([{x: 200, y: 200, width: 400, height: 200}])     .attr("id", "base")     .attr("x", function (d) {return d.x;})     .attr('y', function (d) {return d.y;})     .attr('width', function (d) {return d.width;})     .attr('height', function (d) {return d.height;})     .attr("fill", "skyblue");  var inp = group.append("foreignobject")             .attr('x', 200)     .attr( 'y', 200)     .append("xhtml:body")     .attr('xmlns','http://www.w3.org/1999/xhtml')     .append('textarea')     .style("font-size" , "20px") 

before

after