title: Text is overflowing in code tag instead of scroll
body: <p>Use of <code>rainbow.js</code> to highlight the code causing code in <code>&lt;code&gt;</code> tag to overflow (x). CSS overflow property doesn't seem to work (even with <code>!important</code>)</p>
  
  <p>Code containing <code>&lt;code&gt;</code> tag</p>
  
  <pre><code>&lt;pre&gt;
      &lt;code&gt;
              Any code to be highligted
      &lt;/code&gt;
  &lt;/pre&gt;
  </code></pre>
  
  <p>CSS :</p>
  
  <pre><code>code {
      overflow: auto; /* Not working (scroll also not working) */
      width: 100%;
  }
  </code></pre>
  
  <p>Replacement of <code>&lt;code&gt;</code> tag with <code>&lt;div&gt;</code> eliminates the overflow problem but highlighting doesn't work (this plugin requires code to be put in <code>&lt;code&gt;</code> tag)</p>
  
  <p>How can I resolve this overflow issue to provide scroll? Or do I need to use any other code highlighting library?</p>
  
  <p>• With <code>code</code> tag (highlight yes, scroll no) <b>Overflow</b> <img src="https://i.stack.imgur.com/WCYKY.jpg" alt="With code tag (highlight yes, scroll no )">
  • With <code>div</code> tag (highlight no, scroll yes) <img src="https://i.stack.imgur.com/Wfqor.jpg" alt="With div tag (highlight no, scroll yes)"></p>