Within a dialog box body, I am attempting to display a table and have applied a CSS class to the wrapping div. When specifying the height in pixels or viewport height units, it works as expected. However, when using a percentage like 50%, the height of the table div does not adjust accordingly and ends up rendering at 100%.
I understand that percentages are calculated based on the parent element, but I'm confused why it's not taking into account the height of the parent element, especially since I have a CSS class applied to the dialog box which is set to be 95% of the screen size.
.dialogbox{
width: 95%;
height: 95%;
}
.table-height {
height: 50%;
}
When using a percentage for the height, the content renders at full size rather than the specified 50%.