Css 当我在div溢出的高度动态添加svg时，如何防止它？

我有一个

网格

像这样的图像

这里一切都很好。我使用

d3.js

动态添加一个

svg

，我想把它放在

.container2

里面

#mysvg

（我放了一个红色边框，这样你就知道我想把

svg

放在哪里了）。但是，当这种情况发生时，

.container2

会变得更大，我想避免这种情况，奇怪的是，

svg

在可用空间中具有精确的大小

我怎样才能纠正它

let width=document.getElementById（'mysvg'）.offsetWidth；
让height=document.getElementById（'mysvg'）。offsetHeight；
让createSvg=d3。选择（“#mysvg”）。追加（“svg”）.attr（“宽度”，宽度）。attr（“高度”，高度）

html，正文{
边际：0px；
填充：0px；
身高：100%；
宽度：100%；
边框：1px纯红；
}
*{
框大小：边框框；
}
svg{
边框：1px纯绿色；
}
h6{
边际：0px；
填充：0px；
}
.container1、.container2、.container3{
边框：1px纯黑；
}
.集装箱箱{
身高：100%；
显示器：flex；
弯曲方向：立柱；
}
.容器图{
柔性生长：1；
}
#mysvg{
边框：1px纯红；
身高：100%；
}
.集装箱网格{
显示：网格！重要；
网格模板区域：
“容器1容器2”
“集装箱1集装箱3”；
网格模板柱：1fr 1fr；
栅隙：10px；
背景色：白色；
填充：10px；
身高：100%；
}
.集装箱1{
网格区域：container1；
}
.集装箱2{
网格区域：container2；
}
.集装箱3{
网格区域：container3；
}

容器1
货柜名称2
容器3

只需为行定义一个明确的高度（就像对列所做的那样），即可避免自动调整大小：

let width=document.getElementById（'mysvg'）.offsetWidth；
让height=document.getElementById（'mysvg'）。offsetHeight；
让createSvg=d3。选择（“#mysvg”）。追加（“svg”）.attr（“宽度”，宽度）。attr（“高度”，高度）

html，正文{
边际：0px；
填充：0px；
身高：100%；
宽度：100%；
边框：1px纯红；
}
*{
框大小：边框框；
}
svg{
边框：1px纯绿色；
}
h6{
边际：0px；
填充：0px；
}
.container1、.container2、.container3{
边框：1px纯黑；
}
.集装箱箱{
身高：100%；
显示器：flex；
弯曲方向：立柱；
}
.容器图{
柔性生长：1；
}
#mysvg{
边框：1px纯红；
身高：100%；
}
.集装箱网格{
显示：网格！重要；
网格模板区域：
“容器1容器2”
“集装箱1集装箱3”；
网格模板柱：1fr 1fr；
网格模板行：1fr 1fr；
栅隙：10px；
背景色：白色；
填充：10px；
身高：100%；
}
.集装箱1{
网格区域：container1；
}
.集装箱2{
网格区域：container2；
}
.集装箱3{
网格区域：container3；
}

容器1
货柜名称2
容器3