CSS horizontal scroll not working

Question

I have a long div that I want to be scrollable, but the scrollbar is greyed out. It doesn't seem to appear no matter what I try. I can drag it left and write by highlighting, but I cannot scroll.

Here is the entire code:

<link rel="stylesheet" href="/documents/mathquill/mathquill.css"/>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script src="/documents/mathquill/mathquill.js"></script>




<style>

#body{width: 500px; overflow-x: scroll;}
</style>
    <div id = "body">


y = \sqrt{\frac{2}{10}}\left(\frac{1}{\sqrt{2}}\cdot 11.07+-0.19\cos \left(\frac{\pi }{10}\left(n+0.5\right)\cdot 1\right)+-8.51\cos \left(\frac{\pi }{10}\left(n+0.5\right)\cdot 2\right)+7\cos \left(\frac{\pi }{10}\left(n+0.5\right)\cdot 3\right)+-7.24\cos \left(\frac{\pi }{10}\left(n+0.5\right)\cdot 4\right)+6.01\cos \left(\frac{\pi }{10}\left(n+0.5\right)\cdot 5\right)+-5.26\cos \left(\frac{\pi }{10}\left(n+0.5\right)\cdot 6\right)+3.93\cos \left(\frac{\pi }{10}\left(n+0.5\right)\cdot 7\right)+-2.76\cos \left(\frac{\pi }{10}\left(n+0.5\right)\cdot 8\right)+1.36\cos \left(\frac{\pi }{10}\left(n+0.5\right)\cdot 9\right)\right)

</div>






<script>
  var MQ = MathQuill.getInterface(2);
  MQ.StaticMath($('#body')[0]);
</script>

You can visit the site here: http://99.246.124.16/scroll.php

Answer 1

Just add overflow-x:scroll to class mq-root-block or mq-hasCursor

and remove overflow-x:scroll from id body

and it will work.