How can I make <pre><code> element horizontally scrollable and ensure content is inside border box?

Question

I am using Skeleton CSS in my project for styling and I noticed that the CSS library has issue with long text inside <pre><code></code></pre> element in which the border box does not cover the entire code (example is in grid code section, please also refer to below image). How do I make sure it's something like GitHub <pre><code></code></pre> below? That is, the box is still displayed until end of the line of the code using Skeleton CSS. thank you very much in advance.

<pre><code>hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello</code></pre>

Answer 1

Just found the solution which is to add overflow-x: scroll; style to the <code></code> tag

i.e. <code class="code-example-body prettyprint" style="overflow-x: scroll;"></code>

Answer 2

How do I make sure [...] the box is still displayed until end of the line of the code

To achieve this effect, you can take advantage of CSS Intrinsic Sizing values like:

• max-content
• min-content
• fit-content

In this instance, you can declare:

min-width: max-content

---

Working Example:

pre {
  padding: 0 6px;
  border: 1px solid rgb(255, 0, 0);
  box-sizing: border-box;
}

pre.with-intrinsic-sizing {
  min-width: max-content;
}

<pre>
<code>
Line of code
Line of code with more text in it.
Line of code with even more text in it and... hopefully there is now enough text in it that the text will extend beyond the right-hand edge of the viewport, even when you expand the snippet to Full Page view.
</code>
</pre>

<pre class="with-intrinsic-sizing">
<code>
Line of code
Line of code with more text in it.
Line of code with even more text in it and... hopefully there is now enough text in it that the text will extend beyond the right-hand edge of the viewport, even when you expand the snippet to Full Page view.
</code>
</pre>

---

Further Reading

• https://developer.mozilla.org/en-US/docs/Web/CSS/max-content