How to align parent div height based on child SVG content

Question

I want to assign height to parent div based on the child content (here SVG is my child which can have different content based on data). If I assign fixed height either to parent or the child, it gives issue when content changes. It works fine for the width (automatically alter div width based on content) but not for height. Here is my code snippet.

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> 
);

Fiddle link: https://jsfiddle.net/1sv3Lwar/

Answer 1

I think the reason your parent <div> isn't "growing" vertically is because you are using:

position: "absolute"

Using absolute positioning or floats will cause this.

Although, assuming you need the absolute positioning, so adding: overflow: hidden should do the trick.