Page goes blank when we set Diagram Div Height as 100%

I observed that my page is blank and diagram is not displayed when I tried to to set Diagram Div Height as 100%. I referred the solution provided in below link and div’s all parent elements are already has Height as 100% and min-height as 100%.

I also observed height of canvas under diagram div is getting changed to 1px when I set div height in %. Any help on this issue is appreciated.

First, if you set height: 500px, does everything display and operate as expected?

As documented,, percentage heights are fractions of the container’s height. You’ll need to debug that by inspecting in the browser to see where the short height is coming from.

Yes when I set height:500px its working as expected

This is an HTML issue, not a GoJS issue.

You’ll probably need to set the height of the html CSS element, and maybe also the body, to 100%.

body {
    height: 100%;

Otherwise, your div will not have a 100% height.

Example codepen