Horizontal Scroll bar is missing from code block in WordPress 5.6

You don’t say whether that is on the front end or the editor.
It looks like the CSS was changed so that the code wraps instead of scrolling.
It also looks like you are using a third party block (because of the Copy button and colors) or that is from the theme, so you should investigate what else changed.

It is on front end.

copy button is shown by this plugin.

And code syntax higlighter is shown by this plugin

The issue is not due to these two plugins as code block
was displaying correctly with horizontal scrollbar in WordPress version 5.5.3 with these plugins.
But the issue arises(horizontal scroll-bar missing) when I upgrade my WordPress version to 5.6.

My Website Link (with WordPress version 5.5.3).

Also check this similar issue.

thanks

• This reply was modified 3 years, 9 months ago by programtown.
• This reply was modified 3 years, 9 months ago by programtown.

This is not the same as the other topic that you mentioned, because the HTML block never had a class name on the front end.

I tried to duplicate this, but I get the same CSS for the code block with WP 5.5.3 and WP 5.6, as far as the wrapping is concerned. They did change the font size, although the theme may override that. Both have pre {overflow: auto}, but on my test and also on your site, that rule is from the theme, not WP.

I have found solution.
In WordPress version 5.6 below css is included for code block.

.wp-block-code code {
    white-space: pre-wrap;
    overflow-wrap: break-word;
}

white-space: pre-wrap; this line was causing issue
So I have overridden that css (from pre-wrap to pre) in my theme editor to solve issue
i.e

.wp-block-code code {
    white-space: pre;
}

Screenshots are attached.

Additional css in wp 5.6 for code block-1

Additional css in wp 5.6 for code block-2

Solution-1

Solution-2

Solution-3

Thanks

• This reply was modified 3 years, 9 months ago by programtown.
• This reply was modified 3 years, 9 months ago by programtown.