Strange offset behaviour when redoc is in a container with a fixed height

[leamingrad]

JSFiddle example of the issue: https://jsfiddle.net/1thgfq23/1/

I am trying to embed ReDoc into an existing site, and have found some strange behavior when incorporating it into an existing layout. The basic layout consists of a container div that has a fixed height, then a header that is attached to the top using position: sticky and the redoc element.

When I load the page, all the elements render correctly, and as I scroll the header stays fixed at the top. However, once I scroll redoc past a certain point in the document (roughly the end of the top-level description) the header gets pushed up out of the page.

This appears to affect chrome and firefox (IE/edge don't support sticky properly so I would not expect this to work there).

The issue seems to be related to the fixed height on the container div - if this is removed then everything works as expected. I would like to keep the height if possible, as it is required for other parts of the site to display correctly.

For a MWE of this issue, see the JSFiddle above.

[RomanHotsiy]

Just add

overflow: auto;

to .container