My current project involves using an angular dialog layout where the API to open and manage the dialog comes from a separate library. The dialog's parent container has a max-height attribute, meaning the dialog's height is determined by its content. This setup presents a challenge when dealing with an empty div within the dialog. Since there is nothing inside the div, the dialog's height remains at zero. How can I make this empty div expand to match the max-height of the parent container?
To illustrate this issue further, consider the following example-
HTML
<html>
<head>
</head>
<body>
<div class="parent">
<div class="child">
</div>
</div>
</body>
</html>
CSS
.parent {
background-color: purple;
max-height: 100px;
}
.a {
background-color: red;
}
In this scenario, I need the child element to expand to the max-height of its parent (100px). Attempts to use CSS properties such as display: flex on the parent and flex: 1 on the child have proven unsuccessful. It is important to note that directly setting the child's height to 100px is not a viable solution, as the specific height value in my case is dynamic and cannot be assumed constant.