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

Question

我想根据子内容为父 div 分配高度（这里 SVG 是我的孩子，它可以根据数据具有不同的内容）。如果我为父级或子级分配固定高度，则会在内容更改时出现问题。它适用于宽度（根据内容自动更改 div 宽度）但不适用于高度。这是我的代码 sn-p。

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 应该可以解决问题。