diff --git a/packages/react/src/components/DataGrid/_index.scss b/packages/react/src/components/DataGrid/_index.scss
index 0890694..ab83e41 100644
--- a/packages/react/src/components/DataGrid/_index.scss
+++ b/packages/react/src/components/DataGrid/_index.scss
@@ -1,10 +1,10 @@
 .c__datagrid {
-
   display: flex;
   flex-direction: column;
   align-items: flex-end;
   gap: var(--c--theme--spacings--s);
   position: relative;
+  container-type: inline-size;
 
   &--empty {
     min-height: 400px;
@@ -15,6 +15,82 @@
     justify-content: center;
   }
 
+  &__table__container {
+    width: 100%;
+    overflow: scroll;
+
+    > table {
+      border-collapse: collapse;
+      font-weight: var(--c--theme--font--weights--regular);
+      width: 100%;
+
+      th, td {
+        text-align: left;
+        padding: 0 var(--c--theme--spacings--s);
+        white-space: nowrap;
+        font-size: var(--c--theme--font--sizes--m);
+        height: 3rem;
+      }
+
+      th {
+        color: var(--c--theme--colors--greyscale-800);
+        font-weight: var(--c--theme--font--weights--bold);
+        font-size: var(--c--theme--font--sizes--h5);
+        text-transform: uppercase;
+
+        .c__datagrid__header {
+          display: flex;
+          align-items: center;
+
+          .material-icons {
+            color: var(--c--theme--colors--greyscale-500);
+          }
+
+          &--sortable {
+            cursor: pointer;
+          }
+
+          &__icon-placeholder {
+            width: 24px;
+            height: 24px;
+          }
+        }
+      }
+
+      td {
+        color: var(--c--theme--colors--greyscale-700);
+      }
+
+      tbody tr {
+        border: 1px var(--c--theme--colors--greyscale-300) solid;
+      }
+
+      .c__datagrid__row {
+        &__cell {
+          &--highlight {
+            color: var(--c--theme--colors--greyscale-800);
+            font-weight: var(--c--theme--font--weights--medium);
+          }
+          &--actions {
+            display: flex;
+            align-items: center;
+            justify-content: flex-end;
+          }
+        }
+      }
+
+      tbody {
+        background-color: var(--c--theme--colors--greyscale-000);
+      }
+
+      .c__datagrid__row__cell--select, .c__datagrid__header--select {
+        width: 0;
+        padding-right: 0;
+      }
+
+    }
+  }
+
   &__loader {
     position: absolute;
     inset: 0;
@@ -53,75 +129,6 @@
     }
   }
 
-  > table {
-    border-collapse: collapse;
-    font-weight: var(--c--theme--font--weights--regular);
-    width: 100%;
 
-    th, td {
-      text-align: left;
-      padding: 0 var(--c--theme--spacings--s);
-      white-space: nowrap;
-      font-size: var(--c--theme--font--sizes--m);
-      height: 3rem;
-    }
-
-    th {
-      color: var(--c--theme--colors--greyscale-800);
-      font-weight: var(--c--theme--font--weights--bold);
-      font-size: var(--c--theme--font--sizes--h5);
-      text-transform: uppercase;
-
-      .c__datagrid__header {
-        display: flex;
-        align-items: center;
-
-        .material-icons {
-          color: var(--c--theme--colors--greyscale-500);
-        }
-
-        &--sortable {
-          cursor: pointer;
-        }
-
-        &__icon-placeholder {
-          width: 24px;
-          height: 24px;
-        }
-      }
-    }
-
-    td {
-      color: var(--c--theme--colors--greyscale-700);
-    }
-
-    tbody tr {
-      border: 1px var(--c--theme--colors--greyscale-300) solid;
-    }
-
-    .c__datagrid__row {
-      &__cell {
-        &--highlight {
-          color: var(--c--theme--colors--greyscale-800);
-          font-weight: var(--c--theme--font--weights--medium);
-        }
-        &--actions {
-          display: flex;
-          align-items: center;
-          justify-content: flex-end;
-        }
-      }
-    }
-
-    tbody {
-      background-color: var(--c--theme--colors--greyscale-000);
-    }
-
-    .c__datagrid__row__cell--select, .c__datagrid__header--select {
-      width: 0;
-      padding-right: 0;
-    }
-
-  }
 
 }
diff --git a/packages/react/src/components/DataGrid/index.tsx b/packages/react/src/components/DataGrid/index.tsx
index 932470a..6810fd3 100644
--- a/packages/react/src/components/DataGrid/index.tsx
+++ b/packages/react/src/components/DataGrid/index.tsx
@@ -158,98 +158,100 @@ export const DataGrid = <T extends Row>({
         )}
         {!isEmpty && (
           <>
-            <table>
-              <thead>
-                {displayHeader &&
-                  table.getHeaderGroups().map((headerGroup) => (
-                    <tr key={headerGroup.id}>
-                      {headerGroup.headers.map((header) => {
+            <div className="c__datagrid__table__container">
+              <table>
+                <thead>
+                  {displayHeader &&
+                    table.getHeaderGroups().map((headerGroup) => (
+                      <tr key={headerGroup.id}>
+                        {headerGroup.headers.map((header) => {
+                          return (
+                            <th
+                              key={header.id}
+                              colSpan={header.colSpan}
+                              className={classNames({
+                                "c__datagrid__header--select":
+                                  header.id === "select",
+                              })}
+                            >
+                              {header.isPlaceholder ? null : (
+                                <div
+                                  className={classNames(
+                                    "c__datagrid__header fs-h5",
+                                    {
+                                      "c__datagrid__header--sortable":
+                                        header.column.getCanSort(),
+                                    },
+                                  )}
+                                  {...(header.column.getCanSort()
+                                    ? {
+                                        role: "button",
+                                        tabIndex: 0,
+                                        onClick:
+                                          header.column.getToggleSortingHandler(),
+                                      }
+                                    : {})}
+                                >
+                                  {flexRender(
+                                    header.column.columnDef.header,
+                                    header.getContext(),
+                                  )}
+                                  {header.column.getIsSorted() === "asc" && (
+                                    <span className="material-icons">
+                                      arrow_drop_up
+                                    </span>
+                                  )}
+                                  {header.column.getIsSorted() === "desc" && (
+                                    <span className="material-icons">
+                                      arrow_drop_down
+                                    </span>
+                                  )}
+                                  {header.id !== "select" &&
+                                    !header.column.getIsSorted() && (
+                                      <span className="c__datagrid__header__icon-placeholder" />
+                                    )}
+                                </div>
+                              )}
+                            </th>
+                          );
+                        })}
+                      </tr>
+                    ))}
+                </thead>
+                <tbody>
+                  {table.getRowModel().rows.map((row) => (
+                    <tr key={row.id} data-testid={row.id}>
+                      {row.getVisibleCells().map((cell, i) => {
+                        let highlight = false;
+                        if (enableRowSelection && i > 0) {
+                          // Enabling selection adds a column at the beginning of the table.
+                          highlight = !!columns[i - 1].highlight;
+                        } else {
+                          highlight = !!columns[i].highlight;
+                        }
                         return (
-                          <th
-                            key={header.id}
-                            colSpan={header.colSpan}
+                          <td
+                            key={cell.id}
                             className={classNames({
-                              "c__datagrid__header--select":
-                                header.id === "select",
+                              "c__datagrid__row__cell--highlight": highlight,
+                              "c__datagrid__row__cell--actions":
+                                cell.column.id === "actions",
+                              "c__datagrid__row__cell--select":
+                                cell.column.id === "select",
                             })}
                           >
-                            {header.isPlaceholder ? null : (
-                              <div
-                                className={classNames(
-                                  "c__datagrid__header fs-h5",
-                                  {
-                                    "c__datagrid__header--sortable":
-                                      header.column.getCanSort(),
-                                  },
-                                )}
-                                {...(header.column.getCanSort()
-                                  ? {
-                                      role: "button",
-                                      tabIndex: 0,
-                                      onClick:
-                                        header.column.getToggleSortingHandler(),
-                                    }
-                                  : {})}
-                              >
-                                {flexRender(
-                                  header.column.columnDef.header,
-                                  header.getContext(),
-                                )}
-                                {header.column.getIsSorted() === "asc" && (
-                                  <span className="material-icons">
-                                    arrow_drop_up
-                                  </span>
-                                )}
-                                {header.column.getIsSorted() === "desc" && (
-                                  <span className="material-icons">
-                                    arrow_drop_down
-                                  </span>
-                                )}
-                                {header.id !== "select" &&
-                                  !header.column.getIsSorted() && (
-                                    <span className="c__datagrid__header__icon-placeholder" />
-                                  )}
-                              </div>
+                            {flexRender(
+                              cell.column.columnDef.cell,
+                              cell.getContext(),
                             )}
-                          </th>
+                          </td>
                         );
                       })}
                     </tr>
                   ))}
-              </thead>
-              <tbody>
-                {table.getRowModel().rows.map((row) => (
-                  <tr key={row.id} data-testid={row.id}>
-                    {row.getVisibleCells().map((cell, i) => {
-                      let highlight = false;
-                      if (enableRowSelection && i > 0) {
-                        // Enabling selection adds a column at the beginning of the table.
-                        highlight = !!columns[i - 1].highlight;
-                      } else {
-                        highlight = !!columns[i].highlight;
-                      }
-                      return (
-                        <td
-                          key={cell.id}
-                          className={classNames({
-                            "c__datagrid__row__cell--highlight": highlight,
-                            "c__datagrid__row__cell--actions":
-                              cell.column.id === "actions",
-                            "c__datagrid__row__cell--select":
-                              cell.column.id === "select",
-                          })}
-                        >
-                          {flexRender(
-                            cell.column.columnDef.cell,
-                            cell.getContext(),
-                          )}
-                        </td>
-                      );
-                    })}
-                  </tr>
-                ))}
-              </tbody>
-            </table>
+                </tbody>
+              </table>
+            </div>
             {!!pagination && <Pagination {...pagination} />}
           </>
         )}