diff --git a/apps/vr-tests-react-components/src/stories/Table.stories.tsx b/apps/vr-tests-react-components/src/stories/Table.stories.tsx
index a4141467d2a5e1..17d5238e7e2c9e 100644
--- a/apps/vr-tests-react-components/src/stories/Table.stories.tsx
+++ b/apps/vr-tests-react-components/src/stories/Table.stories.tsx
@@ -23,12 +23,43 @@ import {
   TableCellActions,
   TableProps,
   TableRowProps,
+  useTableColumnSizing_unstable,
+  useTableFeatures,
+  TableColumnDefinition,
+  createTableColumn,
 } from '@fluentui/react-table';
 import { Button } from '@fluentui/react-button';
 import { storiesOf } from '@storybook/react';
 import { Steps, StoryWright } from 'storywright';
 
-const items = [
+type FileCell = {
+  label: string;
+  icon: JSX.Element;
+};
+
+type LastUpdatedCell = {
+  label: string;
+  timestamp: number;
+};
+
+type LastUpdateCell = {
+  label: string;
+  icon: JSX.Element;
+};
+
+type AuthorCell = {
+  label: string;
+  status: PresenceBadgeStatus;
+};
+
+type Item = {
+  file: FileCell;
+  author: AuthorCell;
+  lastUpdated: LastUpdatedCell;
+  lastUpdate: LastUpdateCell;
+};
+
+const items: Item[] = [
   {
     file: { label: 'Meeting notes', icon: <DocumentRegular /> },
     author: { label: 'Max Mustermann', status: 'available' },
@@ -74,6 +105,25 @@ const columns = [
   { columnKey: 'lastUpdate', label: 'Last update' },
 ];
 
+const columnsDef: TableColumnDefinition<Item>[] = [
+  createTableColumn<Item>({
+    columnId: 'file',
+    renderHeaderCell: () => <>File</>,
+  }),
+  createTableColumn<Item>({
+    columnId: 'author',
+    renderHeaderCell: () => <>Author</>,
+  }),
+  createTableColumn<Item>({
+    columnId: 'lastUpdated',
+    renderHeaderCell: () => <>Last updated</>,
+  }),
+  createTableColumn<Item>({
+    columnId: 'lastUpdate',
+    renderHeaderCell: () => <>Last update</>,
+  }),
+];
+
 interface SharedVrTestArgs {
   noNativeElements: TableProps['noNativeElements'];
   selectedRowAppearance?: TableRowProps['appearance'];
@@ -634,6 +684,85 @@ const Truncate: React.FC<SharedVrTestArgs & { truncate?: boolean }> = ({ noNativ
   </Table>
 );
 
+const ResizableColumns: React.FC<SharedVrTestArgs & { scrollToEnd?: boolean }> = ({
+  noNativeElements,
+  scrollToEnd,
+}) => {
+  const [columnSizingOptions] = React.useState({
+    file: {
+      idealWidth: 300,
+      minWidth: 300,
+    },
+  });
+
+  const { columnSizing_unstable: columnSizing, tableRef } = useTableFeatures(
+    {
+      columns: columnsDef,
+      items,
+    },
+    [
+      useTableColumnSizing_unstable({
+        columnSizingOptions,
+      }),
+    ],
+  );
+  return (
+    <div style={{ width: '500px', overflow: 'auto', border: '1px dashed black' }}>
+      <Table noNativeElements={noNativeElements} ref={tableRef} {...columnSizing.getTableProps()}>
+        <TableHeader>
+          <TableRow>
+            {columns.map(column => (
+              <TableHeaderCell key={column.columnKey} {...columnSizing.getTableHeaderCellProps(column.columnKey)}>
+                {column.label}
+              </TableHeaderCell>
+            ))}
+          </TableRow>
+        </TableHeader>
+        <TableBody>
+          {items.map((item, i) => (
+            <TableRow key={item.file.label} className={`row-${i}`}>
+              <TableCell {...columnSizing.getTableCellProps('file')}>
+                <TableCellLayout truncate media={item.file.icon}>
+                  {item.file.label}
+                  <TableCellActions>
+                    <Button icon={<EditRegular />} appearance="subtle" />
+                    <Button icon={<MoreHorizontalRegular />} appearance="subtle" />
+                  </TableCellActions>
+                </TableCellLayout>
+              </TableCell>
+              <TableCell {...columnSizing.getTableCellProps('author')}>
+                <TableCellLayout
+                  truncate
+                  media={
+                    <Avatar name={item.author.label} badge={{ status: item.author.status as PresenceBadgeStatus }} />
+                  }
+                >
+                  {item.author.label}
+                </TableCellLayout>
+              </TableCell>
+              <TableCell {...columnSizing.getTableCellProps('lastUpdated')}>
+                <TableCellLayout truncate>{item.lastUpdated.label}</TableCellLayout>
+              </TableCell>
+              <TableCell {...columnSizing.getTableCellProps('lastUpdate')}>
+                <TableCellLayout truncate media={item.lastUpdate.icon}>
+                  {item.lastUpdate.label}
+                </TableCellLayout>
+              </TableCell>
+              <div
+                ref={el => {
+                  if (el && scrollToEnd) {
+                    el.scrollIntoView();
+                  }
+                }}
+              />
+            </TableRow>
+          ))}
+        </TableBody>
+      </Table>
+    </div>
+  );
+};
+
 ([true, false] as const).forEach(noNativeElements => {
   const layoutName = noNativeElements ? 'flex' : 'table';
   storiesOf(`Table layout ${layoutName} - cell actions`, module)
@@ -760,4 +889,8 @@ const Truncate: React.FC<SharedVrTestArgs & { truncate?: boolean }> = ({ noNativ
     .addStory('default (disabled)', () => <Truncate noNativeElements={noNativeElements} />)
     .addStory('false', () => <Truncate noNativeElements={noNativeElements} truncate={false} />)
     .addStory('true', () => <Truncate noNativeElements={noNativeElements} truncate={true} />);
+
+  storiesOf(`Table layout ${layoutName} - resizable columns`, module)
+    .addStory('default', () => <ResizableColumns noNativeElements={noNativeElements} />)
+    .addStory('end', () => <ResizableColumns noNativeElements={noNativeElements} scrollToEnd />);
 });
diff --git a/change/@fluentui-react-table-1a06bc91-0c0f-464f-a1c3-4523427d45a1.json b/change/@fluentui-react-table-1a06bc91-0c0f-464f-a1c3-4523427d45a1.json
new file mode 100644
index 00000000000000..e5b367f414a594
--- /dev/null
+++ b/change/@fluentui-react-table-1a06bc91-0c0f-464f-a1c3-4523427d45a1.json
@@ -0,0 +1,7 @@
+{
+  "type": "patch",
+  "comment": "fix: Improve visuals when Table/DataGrid overflows it's parent",
+  "packageName": "@fluentui/react-table",
+  "email": "jirivyhnalek@microsoft.com",
+  "dependentChangeType": "patch"
+}
diff --git a/packages/react-components/react-table/src/components/DataGrid/useDataGrid.ts b/packages/react-components/react-table/src/components/DataGrid/useDataGrid.ts
index 039d058be6bacd..acf991ca4359f6 100644
--- a/packages/react-components/react-table/src/components/DataGrid/useDataGrid.ts
+++ b/packages/react-components/react-table/src/components/DataGrid/useDataGrid.ts
@@ -112,6 +112,7 @@ export const useDataGrid_unstable = (props: DataGridProps, ref: React.Ref<HTMLEl
       ...(focusMode === 'composite' && compositeTabsterAttribute),
       ...props,
       onKeyDown,
+      ...(resizableColumns ? tableState.columnSizing_unstable.getTableProps(props) : {}),
     },
     useMergedRefs(ref, tableState.tableRef, innerRef),
   );
diff --git a/packages/react-components/react-table/src/hooks/types.ts b/packages/react-components/react-table/src/hooks/types.ts
index bd94715b5308b0..c3649cdb49c42e 100644
--- a/packages/react-components/react-table/src/hooks/types.ts
+++ b/packages/react-components/react-table/src/hooks/types.ts
@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { SortDirection } from '../components/Table/Table.types';
+import { SortDirection, TableProps } from '../components/Table/Table.types';
 import { TableHeaderCellProps } from '../components/TableHeaderCell/TableHeaderCell.types';
 import { SelectionMode } from '@fluentui/react-utilities';
 
@@ -175,6 +175,7 @@ export interface ColumnWidthState {
   padding: number;
 }
 
+export type ColumnSizingTableProps = Partial<TableProps>;
 export type ColumnSizingTableHeaderCellProps = Pick<TableHeaderCellProps, 'style' | 'aside'>;
 export type ColumnSizingTableCellProps = Pick<TableHeaderCellProps, 'style'>;
 
@@ -184,6 +185,7 @@ export interface TableColumnSizingState {
   getOnMouseDown: (columnId: TableColumnId) => (e: React.MouseEvent | React.TouchEvent) => void;
   setColumnWidth: (columnId: TableColumnId, newSize: number) => void;
   getColumnWidths: () => ColumnWidthState[];
+  getTableProps: (props?: Partial<TableProps>) => ColumnSizingTableProps;
   getTableHeaderCellProps: (columnId: TableColumnId) => ColumnSizingTableHeaderCellProps;
   getTableCellProps: (columnId: TableColumnId) => ColumnSizingTableCellProps;
   enableKeyboardMode: (
diff --git a/packages/react-components/react-table/src/hooks/useTableColumnSizing.test.ts b/packages/react-components/react-table/src/hooks/useTableColumnSizing.test.ts
index 66502b4399c78c..7f3669171bce08 100644
--- a/packages/react-components/react-table/src/hooks/useTableColumnSizing.test.ts
+++ b/packages/react-components/react-table/src/hooks/useTableColumnSizing.test.ts
@@ -62,6 +62,7 @@ describe('useTableColumnSizing', () => {
         "getOnMouseDown": [MockFunction],
         "getTableCellProps": [Function],
         "getTableHeaderCellProps": [Function],
+        "getTableProps": [Function],
         "setColumnWidth": [Function],
       }
     `);
diff --git a/packages/react-components/react-table/src/hooks/useTableColumnSizing.tsx b/packages/react-components/react-table/src/hooks/useTableColumnSizing.tsx
index 2c1a3cfe3e120c..1f63ef74d398ed 100644
--- a/packages/react-components/react-table/src/hooks/useTableColumnSizing.tsx
+++ b/packages/react-components/react-table/src/hooks/useTableColumnSizing.tsx
@@ -18,6 +18,7 @@ export const defaultColumnSizingState: TableColumnSizingState = {
   getColumnWidths: () => [],
   getOnMouseDown: () => () => null,
   setColumnWidth: () => null,
+  getTableProps: () => ({}),
   getTableHeaderCellProps: () => ({ style: {}, columnId: '' }),
   getTableCellProps: () => ({ style: {}, columnId: '' }),
   enableKeyboardMode: () => () => null,
@@ -75,16 +76,27 @@ function useTableColumnSizingState<TItem>(
       setColumnWidth: (columnId: TableColumnId, w: number) =>
         columnResizeState.setColumnWidth(undefined, { columnId, width: w }),
       getColumnWidths: columnResizeState.getColumns,
+      getTableProps: (props = {}) => {
+        return {
+          ...props,
+          style: {
+            minWidth: 'fit-content',
+            ...(props.style || {}),
+          },
+        };
+      },
       getTableHeaderCellProps: (columnId: TableColumnId) => {
         const col = columnResizeState.getColumnById(columnId);
+        const isLastColumn = columns[columns.length - 1]?.columnId === columnId;
 
-        const aside = (
+        const aside = isLastColumn ? null : (
           <TableResizeHandle
             onMouseDown={mouseHandler.getOnMouseDown(columnId)}
             onTouchStart={mouseHandler.getOnMouseDown(columnId)}
             {...getKeyboardResizingProps(columnId, col?.width || 0)}
           />
         );
+
         return col
           ? {
               style: getColumnStyles(col),
diff --git a/packages/react-components/react-table/stories/DataGrid/ResizableColumns.stories.tsx b/packages/react-components/react-table/stories/DataGrid/ResizableColumns.stories.tsx
index 94df950d89f9b9..a9c0f19313329c 100644
--- a/packages/react-components/react-table/stories/DataGrid/ResizableColumns.stories.tsx
+++ b/packages/react-components/react-table/stories/DataGrid/ResizableColumns.stories.tsx
@@ -178,47 +178,49 @@ export const ResizableColumns = () => {
   const refMap = React.useRef<Record<string, HTMLElement | null>>({});
 
   return (
-    <DataGrid
-      items={items}
-      columns={columns}
-      sortable
-      getRowId={item => item.file.label}
-      selectionMode="multiselect"
-      resizableColumns
-      columnSizingOptions={columnSizingOptions}
-    >
-      <DataGridHeader>
-        <DataGridRow selectionCell={{ 'aria-label': 'Select all rows' }}>
-          {({ renderHeaderCell, columnId }, dataGrid) =>
-            dataGrid.resizableColumns ? (
-              <Menu openOnContext>
-                <MenuTrigger>
-                  <DataGridHeaderCell ref={el => (refMap.current[columnId] = el)}>
-                    {renderHeaderCell()}
-                  </DataGridHeaderCell>
-                </MenuTrigger>
-                <MenuPopover>
-                  <MenuList>
-                    <MenuItem onClick={dataGrid.columnSizing_unstable.enableKeyboardMode(columnId)}>
-                      Keyboard Column Resizing
-                    </MenuItem>
-                  </MenuList>
-                </MenuPopover>
-              </Menu>
-            ) : (
-              <DataGridHeaderCell>{renderHeaderCell()}</DataGridHeaderCell>
-            )
-          }
-        </DataGridRow>
-      </DataGridHeader>
-      <DataGridBody<Item>>
-        {({ item, rowId }) => (
-          <DataGridRow<Item> key={rowId} selectionCell={{ 'aria-label': 'Select row' }}>
-            {({ renderCell }) => <DataGridCell>{renderCell(item)}</DataGridCell>}
+    <div style={{ overflowX: 'auto' }}>
+      <DataGrid
+        items={items}
+        columns={columns}
+        sortable
+        getRowId={item => item.file.label}
+        selectionMode="multiselect"
+        resizableColumns
+        columnSizingOptions={columnSizingOptions}
+      >
+        <DataGridHeader>
+          <DataGridRow selectionCell={{ 'aria-label': 'Select all rows' }}>
+            {({ renderHeaderCell, columnId }, dataGrid) =>
+              dataGrid.resizableColumns ? (
+                <Menu openOnContext>
+                  <MenuTrigger>
+                    <DataGridHeaderCell ref={el => (refMap.current[columnId] = el)}>
+                      {renderHeaderCell()}
+                    </DataGridHeaderCell>
+                  </MenuTrigger>
+                  <MenuPopover>
+                    <MenuList>
+                      <MenuItem onClick={dataGrid.columnSizing_unstable.enableKeyboardMode(columnId)}>
+                        Keyboard Column Resizing
+                      </MenuItem>
+                    </MenuList>
+                  </MenuPopover>
+                </Menu>
+              ) : (
+                <DataGridHeaderCell>{renderHeaderCell()}</DataGridHeaderCell>
+              )
+            }
           </DataGridRow>
-        )}
-      </DataGridBody>
-    </DataGrid>
+        </DataGridHeader>
+        <DataGridBody<Item>>
+          {({ item, rowId }) => (
+            <DataGridRow<Item> key={rowId} selectionCell={{ 'aria-label': 'Select row' }}>
+              {({ renderCell }) => <DataGridCell>{renderCell(item)}</DataGridCell>}
+            </DataGridRow>
+          )}
+        </DataGridBody>
+      </DataGrid>
+    </div>
   );
 };
 
diff --git a/packages/react-components/react-table/stories/Table/ResizableColumnsControlled.stories.tsx b/packages/react-components/react-table/stories/Table/ResizableColumnsControlled.stories.tsx
index 7661bd6657680f..5fda7f533f0628 100644
--- a/packages/react-components/react-table/stories/Table/ResizableColumnsControlled.stories.tsx
+++ b/packages/react-components/react-table/stories/Table/ResizableColumnsControlled.stories.tsx
@@ -272,46 +272,48 @@ export const ResizableColumnsControlled = () => {
           Add removed column
         </Button>
       </p>
-      <Table sortable aria-label="Table with sort" ref={tableRef}>
-        <TableHeader>
-          <TableRow>
-            {columns.map((column, index) => (
-              <Menu openOnContext key={column.columnId}>
-                <MenuTrigger>
-                  <TableHeaderCell
-                    key={column.columnId}
-                    {...columnSizing.getTableHeaderCellProps(column.columnId)}
-                    {...headerSortProps(column.columnId)}
-                  >
-                    {column.renderHeaderCell()}
-                    <span style={{ position: 'absolute', right: 0 }} onClick={() => removeColumn(index)}>
-                      x
-                    </span>
-                  </TableHeaderCell>
-                </MenuTrigger>
-                <MenuPopover>
-                  <MenuList>
-                    <MenuItem onClick={columnSizing.enableKeyboardMode(column.columnId)}>
-                      Keyboard Column Resizing
-                    </MenuItem>
-                  </MenuList>
-                </MenuPopover>
-              </Menu>
-            ))}
-          </TableRow>
-        </TableHeader>
-        <TableBody>
-          {rows.map(({ item }) => (
-            <TableRow key={item.file.label}>
-              {columns.map(column => (
-                <TableCell key={column.columnId} {...columnSizing.getTableCellProps(column.columnId)}>
-                  {column.renderCell(item)}
-                </TableCell>
+      <div style={{ overflowX: 'auto' }}>
+        <Table sortable aria-label="Table with sort" ref={tableRef} {...columnSizing.getTableProps()}>
+          <TableHeader>
+            <TableRow>
+              {columns.map((column, index) => (
+                <Menu openOnContext key={column.columnId}>
+                  <MenuTrigger>
+                    <TableHeaderCell
+                      key={column.columnId}
+                      {...columnSizing.getTableHeaderCellProps(column.columnId)}
+                      {...headerSortProps(column.columnId)}
+                    >
+                      {column.renderHeaderCell()}
+                      <span style={{ position: 'absolute', right: 0 }} onClick={() => removeColumn(index)}>
+                        x
+                      </span>
+                    </TableHeaderCell>
+                  </MenuTrigger>
+                  <MenuPopover>
+                    <MenuList>
+                      <MenuItem onClick={columnSizing.enableKeyboardMode(column.columnId)}>
+                        Keyboard Column Resizing
+                      </MenuItem>
+                    </MenuList>
+                  </MenuPopover>
+                </Menu>
               ))}
             </TableRow>
-          ))}
-        </TableBody>
-      </Table>
+          </TableHeader>
+          <TableBody>
+            {rows.map(({ item }) => (
+              <TableRow key={item.file.label}>
+                {columns.map(column => (
+                  <TableCell key={column.columnId} {...columnSizing.getTableCellProps(column.columnId)}>
+                    {column.renderCell(item)}
+                  </TableCell>
+                ))}
+              </TableRow>
+            ))}
+          </TableBody>
+        </Table>
+      </div>
     </>
   );
 };
diff --git a/packages/react-components/react-table/stories/Table/ResizableColumnsUncontrolled.stories.tsx b/packages/react-components/react-table/stories/Table/ResizableColumnsUncontrolled.stories.tsx
index db34111c955683..03416a45201829 100644
--- a/packages/react-components/react-table/stories/Table/ResizableColumnsUncontrolled.stories.tsx
+++ b/packages/react-components/react-table/stories/Table/ResizableColumnsUncontrolled.stories.tsx
@@ -161,60 +161,62 @@ export const ResizableColumnsUncontrolled = () => {
         <label htmlFor={inputId}>First column width: </label>
         <Input type="number" id={inputId} onChange={onWidthChange} value={inputValue ? inputValue.toString() : ''} />
       </p>
-      <Table sortable aria-label="Table with sort" ref={tableRef}>
-        <TableHeader>
-          <TableRow>
-            {columns.map(column => (
-              <Menu openOnContext key={column.columnId}>
-                <MenuTrigger>
-                  <TableHeaderCell
-                    key={column.columnId}
-                    {...columnSizing_unstable.getTableHeaderCellProps(column.columnId)}
+      <div style={{ overflowX: 'auto' }}>
+        <Table sortable aria-label="Table with sort" ref={tableRef} {...columnSizing_unstable.getTableProps()}>
+          <TableHeader>
+            <TableRow>
+              {columns.map(column => (
+                <Menu openOnContext key={column.columnId}>
+                  <MenuTrigger>
+                    <TableHeaderCell
+                      key={column.columnId}
+                      {...columnSizing_unstable.getTableHeaderCellProps(column.columnId)}
+                    >
+                      {column.renderHeaderCell()}
+                    </TableHeaderCell>
+                  </MenuTrigger>
+                  <MenuPopover>
+                    <MenuList>
+                      <MenuItem onClick={columnSizing_unstable.enableKeyboardMode(column.columnId)}>
+                        Keyboard Column Resizing
+                      </MenuItem>
+                    </MenuList>
+                  </MenuPopover>
+                </Menu>
+              ))}
+            </TableRow>
+          </TableHeader>
+          <TableBody>
+            {rows.map(({ item }) => (
+              <TableRow key={item.file.label}>
+                <TableCell {...columnSizing_unstable.getTableCellProps('file')}>
+                  <TableCellLayout truncate media={item.file.icon}>
+                    {item.file.label}
+                  </TableCellLayout>
+                </TableCell>
+                <TableCell {...columnSizing_unstable.getTableCellProps('author')}>
+                  <TableCellLayout
+                    truncate
+                    media={
+                      <Avatar name={item.author.label} badge={{ status: item.author.status as PresenceBadgeStatus }} />
+                    }
                   >
-                    {column.renderHeaderCell()}
-                  </TableHeaderCell>
-                </MenuTrigger>
-                <MenuPopover>
-                  <MenuList>
-                    <MenuItem onClick={columnSizing_unstable.enableKeyboardMode(column.columnId)}>
-                      Keyboard Column Resizing
-                    </MenuItem>
-                  </MenuList>
-                </MenuPopover>
-              </Menu>
+                    {item.author.label}
+                  </TableCellLayout>
+                </TableCell>
+                <TableCell {...columnSizing_unstable.getTableCellProps('lastUpdated')}>
+                  <TableCellLayout truncate>{item.lastUpdated.label}</TableCellLayout>
+                </TableCell>
+                <TableCell {...columnSizing_unstable.getTableCellProps('lastUpdate')}>
+                  <TableCellLayout truncate media={item.lastUpdate.icon}>
+                    {item.lastUpdate.label}
+                  </TableCellLayout>
+                </TableCell>
+              </TableRow>
             ))}
-          </TableRow>
-        </TableHeader>
-        <TableBody>
-          {rows.map(({ item }) => (
-            <TableRow key={item.file.label}>
-              <TableCell {...columnSizing_unstable.getTableCellProps('file')}>
-                <TableCellLayout truncate media={item.file.icon}>
-                  {item.file.label}
-                </TableCellLayout>
-              </TableCell>
-              <TableCell {...columnSizing_unstable.getTableCellProps('author')}>
-                <TableCellLayout
-                  truncate
-                  media={
-                    <Avatar name={item.author.label} badge={{ status: item.author.status as PresenceBadgeStatus }} />
-                  }
-                >
-                  {item.author.label}
-                </TableCellLayout>
-              </TableCell>
-              <TableCell {...columnSizing_unstable.getTableCellProps('lastUpdated')}>
-                <TableCellLayout truncate>{item.lastUpdated.label}</TableCellLayout>
-              </TableCell>
-              <TableCell {...columnSizing_unstable.getTableCellProps('lastUpdate')}>
-                <TableCellLayout truncate media={item.lastUpdate.icon}>
-                  {item.lastUpdate.label}
-                </TableCellLayout>
-              </TableCell>
-            </TableRow>
-          ))}
-        </TableBody>
-      </Table>
+          </TableBody>
+        </Table>
+      </div>
     </>
   );
 };