diff --git a/packages/debug/src/browser/editor/debug-hover-widget.ts b/packages/debug/src/browser/editor/debug-hover-widget.ts
index e073191cd2bc5..3ec57f795637e 100644
--- a/packages/debug/src/browser/editor/debug-hover-widget.ts
+++ b/packages/debug/src/browser/editor/debug-hover-widget.ts
@@ -97,6 +97,9 @@ export class DebugHoverWidget extends SourceTreeWidget implements monaco.editor.
         this.contentNode.className = 'theia-debug-hover-content';
         this.domNode.appendChild(this.contentNode);
 
+        // for stopping scroll events from contentNode going to the editor
+        this.contentNode.addEventListener('wheel', e => e.stopPropagation());
+
         this.editor.getControl().addContentWidget(this);
         this.source = this.hoverSource;
         this.toDispose.pushAll([
diff --git a/packages/debug/src/browser/style/index.css b/packages/debug/src/browser/style/index.css
index be675ba0db906..68a694ee7ed0e 100644
--- a/packages/debug/src/browser/style/index.css
+++ b/packages/debug/src/browser/style/index.css
@@ -338,7 +338,7 @@
 
 /** Hover */
 .theia-debug-hover {
-    display: flex;
+    display: flex !important;
     flex-direction: column;
     border: 1px solid var(--theia-editorHoverWidget-border);
     background: var(--theia-editorHoverWidget-background);