Markdown viewers containing code blocks render a horizontal scroll when no overflow is occurring

[Lambeaux]

Reproduce

Consider the following notebook:

^{:nextjournal.clerk/visibility {:code :hide :result :hide}}
(ns bug-reproduce
  (:require [nextjournal.clerk :as clerk]))

^{:nextjournal.clerk/visibility {:code :hide :result :show}}
(clerk/md
 "## Clerk Markdown Bug?
  So, is it true that I can just write markdown here?
  ```clojure
  (+ 1 1)
  ```
  Dang, that's pretty sweet! What if I add even more?
  ```clojure
  (+ 2 2)
  ```")

The rendered output adds a horizontal scroll bar when no scroll bar is necessary. It appears to be adding it to the entire markdown result, not just the code blocks.

Only occurs with code blocks

If you remove all the code blocks, the horizontal scroll disappears.

Current DOM being rendered

I was poking around with Chrome dev tools (as one does) and found what may be the culprit. There appears to be an overflow-x CSS property being set on a div wrapping the final viewer div.

Here is the majority of the relevant DOM.

Problematic CSS

Here is the property still enabled.

Disable the CSS property

If I disable that property...

Problem solved

...the problem is resolved.

[Lambeaux]

One other data point. If you use markdown in line comments, this issue doesn't appear to occur. If you try this, the DOM behaves properly (best I can tell).

;; ## Clerk Markdown Bug?
;; So, is it true that I can just write markdown here?
;; ```clojure
;; (+ 1 1)
;; ```
;; Dang, that's pretty sweet! What if I add even more?
;; ```clojure
;; (+ 2 2)
;; ```