diff --git a/packages/mui-lab/src/Masonry/Masonry.js b/packages/mui-lab/src/Masonry/Masonry.js
index 4130aa4712c5c4..c4b24de29d50d5 100644
--- a/packages/mui-lab/src/Masonry/Masonry.js
+++ b/packages/mui-lab/src/Masonry/Masonry.js
@@ -58,6 +58,7 @@ const validatePropValues = (base, prop) => {
 
 export const getStyle = ({ ownerState, theme }) => {
   let styles = {
+    width: '100%',
     display: 'flex',
     flexFlow: 'column wrap',
     alignContent: 'space-between',
diff --git a/packages/mui-lab/src/Masonry/Masonry.test.js b/packages/mui-lab/src/Masonry/Masonry.test.js
index 82a6f45752ef23..137efa85b0aeb2 100644
--- a/packages/mui-lab/src/Masonry/Masonry.test.js
+++ b/packages/mui-lab/src/Masonry/Masonry.test.js
@@ -37,7 +37,7 @@ describe('<Masonry />', () => {
       const columns = 4;
       const spacing = 1;
       const { getByTestId } = render(
-        <Masonry data-testid="container" sx={{ width: 500 }}>
+        <Masonry sx={{ minWidth: 1000 }} data-testid="container">
           <div data-testid="child" style={{ height: 100 }} />
           <div style={{ height: 50 }} />
           <div style={{ height: 50 }} />
@@ -46,6 +46,7 @@ describe('<Masonry />', () => {
       );
       const columnHeight = 100 + parseToNumber(theme.spacing(spacing));
       expect(getByTestId('container')).toHaveComputedStyle({
+        width: '100%',
         display: 'flex',
         flexFlow: 'column wrap',
         alignContent: 'space-between',
@@ -75,6 +76,7 @@ describe('<Masonry />', () => {
           theme,
         }),
       ).to.deep.equal({
+        width: '100%',
         display: 'flex',
         flexFlow: 'column wrap',
         alignContent: 'space-between',
@@ -102,6 +104,7 @@ describe('<Masonry />', () => {
           theme,
         }),
       ).to.deep.equal({
+        width: '100%',
         display: 'flex',
         flexFlow: 'column wrap',
         alignContent: 'space-between',
@@ -150,6 +153,7 @@ describe('<Masonry />', () => {
           theme,
         }),
       ).to.deep.equal({
+        width: '100%',
         display: 'flex',
         flexFlow: 'column wrap',
         alignContent: 'space-between',
@@ -195,6 +199,7 @@ describe('<Masonry />', () => {
           theme,
         }),
       ).to.deep.equal({
+        width: '100%',
         display: 'flex',
         flexFlow: 'column wrap',
         alignContent: 'space-between',