danbeggan danbeggan - 4 months ago 22
CSS Question

Skeleton Code Block Overflow

I am using the skeleton framework on my site and I'm having an issue with code blocks, when the code is too long it goes over the width of the block.

code overflow issue

Ive tried fixing it using this solution in my css https://github.com/dhg/Skeleton/pull/303/files by adding overflow-x: scroll; to the css, but it shows an empty scroll bar when the code does not overflow the the block.

pre > code {
display: block;
padding: 1rem 1.5rem;
white-space: pre;
overflow-x: scroll; }


overflow x issue

The question is, is there a way to make the code block look nicer (not overflow on smaller displays) either with overflow-x: scroll; or another way, while not having the bar at the bottom when the code doesnt overflow the area?

Answer

You could try

pre > code {
  display: block;
  padding: 1rem 1.5rem;
  white-space: pre;
  overflow-x: auto; }

pre > code {
  display: block;
  padding: 1rem 1.5rem;
  white-space: pre;
  overflow-x: auto;
  width: 80%;
  background: lightblue;
}
<pre><code>Lorem ipsum dolor sit amet, consectetur.</code></pre>

<pre><code>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Enim, ratione.</code></pre>