set width of inner div on scrollable element to 100% of scrollable width

Answer 1

You can't if you're going to set the outer div to be width 300px. It's the unbroken text breaking the bounding box. You can, however, wrap the word by adding this to the content CSS:

word-wrap: break-word;

However, if that 300px doesn't matter to you, you can move the overflow: auto from the scrollable class to the content one, and that, too, should fix the background issue.