2

I am having a problem with the width of a code block I have inside of a list element. This list element is set by JavaScript, as it is used with Swipejs, to the width of the page.

However, the problem I have is that when the <pre> element has got a large block of text on a single line that surpasses the width of the parent, the list element expands. My question would be how can I prevent this from happening and force the <pre> element to have a set width to the <li> width while having overflow:scroll? 

<li>
<pre class="language-css"><code class="language-css">
</code></pre>
</li>

I am aware that this can be done by defining a specific fixed width to the <pre> element but as it should work with different screen sizes, this is not possible. I hope you can help. Thanks!

Zach Saucier
  • 24,871
  • 12
  • 85
  • 147
Andrew Deniszczyc
  • 3,298
  • 3
  • 19
  • 16
  • 1
    Make it `display:block`? Blocks stretch to fill space horizontally by default. – TheZ Aug 07 '12 at 20:40
  • http://stackoverflow.com/questions/3463664/make-an-image-width-100-of-parent-div-but-not-bigger-than-its-own-width – RASMiranda Dec 10 '15 at 16:16

0 Answers0