diff --git a/lib/src/code_field/code_field.dart b/lib/src/code_field/code_field.dart
index efd45057..8e40fd85 100644
--- a/lib/src/code_field/code_field.dart
+++ b/lib/src/code_field/code_field.dart
@@ -506,6 +506,7 @@ class _CodeFieldState extends State<CodeField> {
     return GutterWidget(
       codeController: widget.controller,
       style: gutterStyle,
+      scrollController: _numberScroll,
     );
   }
 
diff --git a/lib/src/gutter/gutter.dart b/lib/src/gutter/gutter.dart
index 88c7424e..a9391d5f 100644
--- a/lib/src/gutter/gutter.dart
+++ b/lib/src/gutter/gutter.dart
@@ -19,16 +19,24 @@ class GutterWidget extends StatelessWidget {
   const GutterWidget({
     required this.codeController,
     required this.style,
+    required this.scrollController,
   });
 
   final CodeController codeController;
   final GutterStyle style;
+  final ScrollController? scrollController;
 
   @override
   Widget build(BuildContext context) {
-    return AnimatedBuilder(
-      animation: codeController,
-      builder: _buildOnChange,
+    return Padding(
+      padding: const EdgeInsets.symmetric(vertical: 16),
+      child: SingleChildScrollView(
+        controller: scrollController,
+        child: AnimatedBuilder(
+          animation: codeController,
+          builder: _buildOnChange,
+        ),
+      ),
     );
   }
 
@@ -66,7 +74,7 @@ class GutterWidget extends StatelessWidget {
     }
 
     return Container(
-      padding: EdgeInsets.only(top: 12, bottom: 12, right: style.margin),
+      padding: EdgeInsets.only(right: style.margin),
       width: style.showLineNumbers ? gutterWidth : null,
       child: Table(
         columnWidths: {