Long code blocks cut off until focus in <Playground>

Bug Report

When you put a component inside of a <Playground /> that extends past 11~ lines it cuts the bottom of the text off, but still presents a scrollbar. However, scrolling scrolls up the non-visible code instead of scrolling the code into view.

To Reproduce

1. Include a <Playground /> element in an mdx file. The component(s) need to be longer than 11 lines (in my case) for it to be cut off.
2. View the page in the browser and the code should be cut off.
3. Click inside of the Playground and the code should then appear.

Expected behavior

Code is visible at all times without requiring the container to gain focus.

Environment

• OS: Windows 10
• Node/npm version: Node 10.11.0/npm 6.4.1

Additional context/Screenshots Below is the bug in action. I see the same result in both Chrome and Firefox.

[pedronauck]

Launched on v0.13.0 ✅

[iagobruno]

I am having the same problem and on the same line 11. I have not done anything other than what was shown in docz documentation and I am using the latest version of docz. online demo: https://httpiago.github.io/ios-theme-toolkit/#/components/Button