How to give height to the parent div based on the height of child content

Question

I want to assign height to parent div based on the child content (here SVG is my child which have varied size data). I cannot assign fixed height since the data comes dynamically. I tried giving height: auto but no use. I want whole data which in my case is square boxes should take either black or red background. Since I gave attribute to SVG as ("overflow", "visible"), the content is visible but unfortunately the background do not increase.

Note: My issue is I am not able to give background color to the whole data since the height is not defined. If I do not give overflow property to SVG(child) then the data(square boxes) is also cropped to half like background.

Here is my code snippet.

React.useEffect(() => {
// calling legend function and passing div id to function
colorLegend("#legend");
}, [dep]);

function colorLegend(legend: string) {
// logic
select(legend)
.append("svg")
.attr("overflow","visible")
.attr("width", 150 + "px");
}

return (
<div style={{position: "absolute",right: 16,top: 10,backgroundColor: "red",borderRadius:"5px",padding: 
"10px"}}>
<label style={{ color: "#6F6F6F" }}>{name}</label>
<div id="legend" style={{backgroundColor: "black"}}></div>
</div> 
);

Fiddle link : https://jsfiddle.net/shru90/wvph9tx5/15/

When asking a HTML and CSS question, you should post that rendered markup and not React code. On top of that, this is a duplicate of an age old problem but I don't have time to look for that. — Rob, Oct 23 '21 at 20:43
@Rob I agree. As I recently started asking questions in stack overflow, I was not aware of that but from next time will keep in mind. Though it look like duplicate and age old but its not that easy when it comes to SVG. — Harry, Oct 23 '21 at 20:48
@Rob Can you help me in solving the issue when you get time ? Here is the fiddle link : https://jsfiddle.net/shru90/wvph9tx5/15/ . The background either black or red should cover the whole content. Also remember to not give fixed height as SVG content may vary. — Harry, Oct 24 '21 at 20:40

score 0 · Answer 1 · edited Oct 23 '21 at 19:09

0

#initial{
  display: block;
  min-width: 100px;
  min-height: 200px;
}
#initial{
  position: absolute;
  right: 16;
  top: 10;
  background-color: red;
  border-radius: 5px;
  padding: 10px;
}
#label{
  color:#6F6F6F;
}
#legend{
  display: flex;
  min-height: 200px;
  min-width: 100px;
  background-color: black;
  color: aliceblue;
  margin:0 auto;
}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="github.css">
    <style>
    </style>
</head>
<body>
    <div id="initial">
    <label id="label">Label name</label>
<div id="legend">123242242424wewdsdsdsdssdsdsdsd</div>
</div> 
</body>
</html>

You can limit the height and width using the min attribute. In the code I inserted above you can insert anything and its height and width will change accordingly but the data will never exceed outside of it.

edited Oct 23 '21 at 19:09

Dharman

30,962
25
85
135

answered Oct 23 '21 at 19:03

Ali Mustafa

676
3
14

Unfortunately your solution is not working in my case. May be because it is SVG and not normal div, not sure though. The height of the id intial is not increasing based on content and hence the contents are getting cropped. – Harry Oct 23 '21 at 20:31
In my code, I am appending SVG to the id "legend" and if I give overflow: visible, contents are not cropped(shown fully) but the background color is cropped(parent div initial do not increase in height) and hence background color do not show for overflowed contents. – Harry Oct 23 '21 at 20:38
@Developer Could you please tell me where to run the snippet you have provided in the link? I tried with SVG, and the result is excellent. The SVG's don't leave the boundary either horizontally or vertically. – Ali Mustafa Oct 23 '21 at 23:38
1

I will try to create a fiddle link for my issue and provide you the link. – Harry Oct 24 '21 at 11:18
1

@Developer You indeed are right. There seems to be an issue because of the SVG. I have tried a lot of things but none seems to work. The only thing that seems to work is increasing the min-height manually. But otherwise, the height doesn't increase automatically. I also found a link on StackOverflow for the same issue but there isn't anything related. I am posting it here anyway maybe you can find something. Link:https://stackoverflow.com/questions/8919076/how-to-make-a-svg-element-expand-or-contract-to-its-parent-container – Ali Mustafa Oct 24 '21 at 19:50
1

Yes, even I tried a lot of things but none worked and hence finally I posted in SO. Unfortunately I cannot give height manually since the SVG content comes dynamically and varies in height. Thanks for your efforts. – Harry Oct 24 '21 at 20:06

How to give height to the parent div based on the height of child content

1 Answers1