I am facing an issue with two nested divs, where the inner one is absolutely positioned inside the outer one. I want the height of the outer div to adjust dynamically according to changes in the width of the inner div. To better illustrate the problem, I have created a simple example on JSFiddle:
Currently, the width of the inner div is fixed at 200px and so is the height of the outer div. Is there a way to make the width of the inner div dynamic based on its content, while also automatically adjusting the height of the outer div to match it? I know this can be achieved using JavaScript, but I would prefer a non-JavaScript solution if possible.
The code snippet provided in the fiddle is as follows:
<div id="outer">
<div id="inner">
</div>
</div>
#outer {
width: 100px;
height: 200px;
position: relative;
background-color: red;
}
#inner {
width: 200px;
height: 100px;
position: absolute;
background-color: green;
}