[Masonry] Set width to 100%

mui · Oct 20, 2021 · 0d54459 · 0d54459
1 parent cd67243
commit 0d54459
Show file tree

Hide file tree

Showing 2 changed files with 7 additions and 1 deletion.
diff --git 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
@@ -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',