diff --git a/lib/codemirror.css b/lib/codemirror.css
index 73109052eb..0411977b97 100644
--- a/lib/codemirror.css
+++ b/lib/codemirror.css
@@ -22,9 +22,6 @@
   /* This corrects for the 1px gap introduced to the left of the scrollbar
      by the rule for .CodeMirror-scrollbar-inner. */
   margin-left: -1px;
-  
-  /* Ensure that the scrollbar appears in Lion. */
-  min-width: 12px;
 }
 
 .CodeMirror-scrollbar-inner {
@@ -33,6 +30,16 @@
   width: 1px;
 }
 
+.CodeMirror-scrollbar.cm-overlap {   
+  /* Ensure that the scrollbar appears in Lion, and that it overlaps the content
+     rather than sitting to the right of it. */
+  position: absolute;
+  z-index: 1;
+  float: none;
+  right: 0;
+  min-width: 12px;
+}
+
 .CodeMirror-gutter {
   position: absolute; left: 0; top: 0;
   z-index: 10;
diff --git a/lib/codemirror.js b/lib/codemirror.js
index 6971b2719b..44b6eaac8e 100644
--- a/lib/codemirror.js
+++ b/lib/codemirror.js
@@ -50,6 +50,13 @@ var CodeMirror = (function() {
     if (!webkit) lineSpace.draggable = true;
     if (options.tabindex != null) input.tabIndex = options.tabindex;
     if (!options.gutter && !options.lineNumbers) gutter.style.display = "none";
+ 
+    // Check for OS X >= 10.7. If so, we need to force a width on the scrollbar, and 
+    // make it overlap the content.
+    var osxMatch = /Mac OS X 10\D([\d+])\D/.exec(navigator.userAgent);
+    if (osxMatch && osxMatch[1] && Number(osxMatch[1]) >= 7) {
+      scrollbar.className += " cm-overlap";
+    }
 
     // Check for problem with IE innerHTML not working when we have a
     // P (or similar) parent node.