diff --git a/Breadcrumb/Breadcrumb/components/BreadcrumbComponent.styles.ts b/Breadcrumb/Breadcrumb/components/BreadcrumbComponent.styles.ts
new file mode 100644
index 00000000..d4483bd3
--- /dev/null
+++ b/Breadcrumb/Breadcrumb/components/BreadcrumbComponent.styles.ts
@@ -0,0 +1,14 @@
+// This wrapperstyle is required, so that,
+// the breadcrumb don't shrink when its inside
+// flexbox, which happens in studio
+export const wrapperStyle = {
+    bottom: 0,
+    left: 0,
+    right: 0,
+    top: 0,
+    overflowX: 'hidden',
+    overflowY: 'hidden',
+    position: 'absolute',
+    width: '100%',
+    height: '100%',
+} as React.CSSProperties;
diff --git a/Breadcrumb/Breadcrumb/components/CanvasBreadcrumb.tsx b/Breadcrumb/Breadcrumb/components/CanvasBreadcrumb.tsx
index ed0d568f..21f6eae1 100644
--- a/Breadcrumb/Breadcrumb/components/CanvasBreadcrumb.tsx
+++ b/Breadcrumb/Breadcrumb/components/CanvasBreadcrumb.tsx
@@ -4,6 +4,7 @@ import { Breadcrumb as CustomBreadcrumb } from '../fluentui-fork/Breadcrumb/Brea
 import { IBreadcrumbProps } from './components.types';
 import { getBreadcrumbItems } from './DatasetMapping';
 import { useAsync } from '@fluentui/react-hooks';
+import { wrapperStyle } from './BreadcrumbComponent.styles';
 
 export const CanvasBreadcrumb = React.memo((props: IBreadcrumbProps): React.ReactElement => {
     const { items, themeJSON, onSelected, setFocus, ariaLabel, tabIndex, maxDisplayedItems, overflowIndex } = props;
@@ -51,19 +52,14 @@ export const CanvasBreadcrumb = React.memo((props: IBreadcrumbProps): React.Reac
 
     const breadcrumbItems: IBreadcrumbItem[] = getBreadcrumbItems(items, onClick);
 
-    // onReduceData is required to prevent breadcrumb from shrinking
-    // when item changes dynamically
-    const returnUndefined = () => undefined;
-
     return (
-        <ThemeProvider applyTo="none" theme={theme} ref={rootRef}>
+        <ThemeProvider applyTo="none" theme={theme} ref={rootRef} style={wrapperStyle}>
             <CustomBreadcrumb
                 items={breadcrumbItems}
                 focusZoneProps={focusZoneProps}
                 maxDisplayedItems={maxDisplayedItems}
                 aria-label={ariaLabel}
                 overflowIndex={overflowIndex}
-                onReduceData={returnUndefined}
             />
         </ThemeProvider>
     );
diff --git a/Breadcrumb/Breadcrumb/generated/ManifestTypes.d.ts b/Breadcrumb/Breadcrumb/generated/ManifestTypes.d.ts
deleted file mode 100644
index ee6e0aae..00000000
--- a/Breadcrumb/Breadcrumb/generated/ManifestTypes.d.ts
+++ /dev/null
@@ -1,15 +0,0 @@
-/*
-*This is auto generated from the ControlManifest.Input.xml file
-*/
-
-// Define IInputs and IOutputs Type. They should match with ControlManifest.
-export interface IInputs {
-    Theme: ComponentFramework.PropertyTypes.StringProperty;
-    AccessibilityLabel: ComponentFramework.PropertyTypes.StringProperty;
-    MaxDisplayedItems: ComponentFramework.PropertyTypes.WholeNumberProperty;
-    OverflowIndex: ComponentFramework.PropertyTypes.WholeNumberProperty;
-    InputEvent: ComponentFramework.PropertyTypes.StringProperty;
-    items: ComponentFramework.PropertyTypes.DataSet;
-}
-export interface IOutputs {
-}