Description

When both wrapLongLines and showLineNumber are true, text selection no longer works smoothly.

It looks like this is because of the display: flex applied when both of these properties are true (3686429#L120)

To Reproduce

1. Visit the demo site: https://react-syntax-highlighter.github.io/react-syntax-highlighter/demo/prism.html
2. Toggle on both "Show line numbers" and "Wrap long lines" checkboxes
3. Compare text selection behavior to when those settings are not checked.

Expected behavior
Text selection behavior should be smooth regardless of these settings.

This is especially important for code examples, as copy/paste from snippets is a common expectation.

Screenshots

Smooth text selection:

"Jagged" text selection

Additional context
I'm seeing this behavior in Chrome, Version 89.0.4389.90 (Official Build) (x86_64) but I expect it's the same across browsers.

My guess is that display: flex interacts oddly with the user-select property. There's nothing specific about differences between elements with different display values in the draft spec https://drafts.csswg.org/css-ui-4/#content-selection, but I might be missing something.