Support Theme: Large blocks of code result in double scroll bars

[bcworkz]

For what ever reason, using the code button or backticks to demarcate blocks of code yields pre and code HTML elements nested together. They both have CSS set to max-height: 40em;. In lengthy code that contains long lines, the included code's width exceeds the container's width, so a horizontal scroll bar appears for the inner <code> container. There's also a vertical scroll bar due to the length of the included code. When the horizontal scroll bar is added, the inner <code> container's height exceeds the outer <pre> container's height, so it too displays a vertical scroll bar, resulting in double bars. If the outer container's max-height property were slightly larger than the inner, the double scroll bar should never appear.

The following attached screenshot came from this forum post: ​https://wordpress.org/support/topic/custom-post-type-with-categories-and-tags-checkbox-disabled/

The browser is the latest available FF for Ubuntu. The same occurs for all Ubuntu browsers I have installed. Container's growing when scroll bars are added may be an Ubuntu only thing. I haven't been able to test other O/Ss.

[SergeyBiryukov]

Caused by box-sizing property in the new theme:

html {
	box-sizing: border-box;
}

*,
*:before,
*:after { /* Inherit box-sizing to make it easier to change the property for components that leverage other behavior; see http://css-tricks.com/inheriting-box-sizing-probably-slightly-better-best-practice/ */
	box-sizing: inherit;
}

pre { box-sizing: content-box; } fixes it for me.

[SergeyBiryukov]

In 4351:

Support Theme: Prevent double scrollbars on large blocks of code.

Fixes #2226.