Fix scrolling of code examples

[simurai]

This fixes #708 where some code examples in the docs show a scrollbar.

The problem seems to be that if a code example uses margin, it doesn't get included when calculating the height for the <iframe>. For example the .tabnav has a height of 37px with a bottom-margin of 15px, but the height of the <iframe> is only 37px, causing the rest to scroll.

Adding overflow: auto to a parent element of the code example seems to fix it.

✨ Preview ✨

Alternatives

We could add any other property that creates a new block formatting context. Not sure if overflow: auto has side effects? 🤔 display: flow-root would be most appropriate, but browser support isn't that great yet.

[whytrall]

Alternative idea: calculate height using something like height = height + margin. I'm not sure if it would work here, but why not ¯\_(ツ)_/¯

[shawnbot]

Ugh. @thetrall As much as I'd prefer not to have to calculate margins, I agree that that's probably the right thing to do here. Either that, or cancel out the margins on the rendered HTML? 😬

[emplums]

@shawnbot Do you have any issues with just setting overflow: auto? That seems like the most simple fix to this issue, unless you foresee any weirdness coming from that?

[shawnbot]

@emplums I am worried that overflow: auto is just a band-aid, but the scrollbars are pretty bad, so let's ship this in 12.1.2. Thanks, @simurai! ❤️

[shawnbot]

I tested this on the branch deployment and it looks great. Ship it! 🚀