如何根据子SVG内容对齐父div高度

Question

我想根据子内容为父div分配高度(这里SVG是我的子元素，可以根据数据具有不同的内容)。如果我指定固定的高度，无论是父或子，它给问题时，内容的变化。它适用于宽度(根据内容自动更改div宽度)，但不适用于高度。下面是我的代码片段:

React.useEffect(() => {
// calling legend function and passing div id to function
colorLegend("#legend");
}, [dep]);
function colorLegend(legend: string) {
// logic
if (colorLegend) {
select(legend)
.append("svg")
.attr("overflow","visible")
.attr("width", 150 + "px")
.call(colorLegend);
}
}
return (
<div style={{position: "absolute",right: 16,top: 
10,backgroundColor: "black",borderRadius: "5px",padding: 
"10px"}}>
<label style={{ color: "#6F6F6F" }}>
{name}
</label>
<div id="legend"></div>
</div> 
);

小提琴链接:https://jsfiddle.net/1sv3Lwar/

Answer 1

我认为你的父母<div>没有"成长"的原因是垂直是因为你在使用:

position: "absolute"

使用绝对定位或浮动将导致此问题。

虽然，假设您需要绝对定位，所以添加:overflow: hidden应该可以达到目的。