I have a grid that looks similar to the image provided https://i.sstatic.net/mvAYp.png
Everything up to this point is working fine. Using d3.js, I am dynamically adding an svg, but I want to position it inside .container2 within #mysvg (I have outlined the area with a red border to indicate where I want the svg to go). However, when I do this, the .container2 expands in size and I want to prevent that. Strangely, the svg itself fits perfectly within the available space.
How can I resolve this issue? Is there a way to correct it?
let width = document.getElementById('mysvg').offsetWidth;
let height = document.getElementById('mysvg').offsetHeight;
let createSvg=d3.select("#mysvg").append("svg").attr("width", width).attr("height", height)html,body{
margin:0px;
padding:0px;
height:100%;
width:100%;
border:1px solid red;
}
*{
box-sizing: border-box;
}
svg{
border:1px solid green;
}
h6{
margin:0px;
padding:0px;
}
.container1,.container2,.container3{
border:1px solid black;
}
.container_flexbox{
height:100%;
display:flex;
flex-direction:column;
}
.container_graph{
flex-grow:1;
}
#mysvg{
border:1px solid red;
height:100%;
}
.container_grid{
display: grid !important;
grid-template-areas:
"container1 container2"
"container1 container3";
grid-template-columns: 1fr 1fr;
grid-gap: 10px;
background-color: white;
padding: 10px;
height:100%;
}
.container1 {
grid-area: container1;
}
.container2 {
grid-area: container2;
}
.container3 {
grid-area: container3;
}<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/5.7.0/d3.min.js"></script>
<div class="container_grid">
<div class="container1">container 1</div>
<div class="container2">
<div class="container_flexbox">
<div>
<h6>title of container 2 </h6>
</div>
<div class="container_graph">
<div id="mysvg">
</div>
</div>
</div>
</div>
<div class="container3">container 3</div>
</div>