Merge pull request #543 from Yoctol/fix/container-overflow

fix(container): add overflow to children element
Yoctol · Apr 16, 2021 · b023357 · b023357
2 parents ade0ace + 1760ec7
commit b023357
Show file tree

Hide file tree

Showing 3 changed files with 15 additions and 3 deletions.
diff --git a/src/Container/Container.tsx b/src/Container/Container.tsx
@@ -73,7 +73,7 @@ const ContainerChildren: FC<ContainerChildrenProps> = ({
 
   if (!hasChildrenTable) {
     return (
-      <Box px="32px" pb="32px" pt={hasTitle ? '0' : '24px'}>
+      <Box px="32px" pb="32px" pt={hasTitle ? '0' : '24px'} overflow="auto">
         {children}
       </Box>
     );
@@ -91,15 +91,15 @@ const ContainerChildren: FC<ContainerChildrenProps> = ({
   return (
     <>
       {children.slice(0, childrenIndex).length > 0 && (
-        <Box py="24px" px="32px">
+        <Box py="24px" px="32px" overflow="auto">
           {children.slice(0, childrenIndex)}
         </Box>
       )}
 
       {children[childrenIndex]}
 
       {children.slice(childrenIndex + 1).length > 0 && (
-        <Box py="24px" px="32px">
+        <Box py="24px" px="32px" overflow="auto">
           {children.slice(childrenIndex + 1)}
         </Box>
       )}

diff --git a/src/Container/__tests__/__snapshots__/Container.spec.tsx.snap b/src/Container/__tests__/__snapshots__/Container.spec.tsx.snap
@@ -14,6 +14,7 @@ exports[`Container should render correctly 1`] = `
   padding-right: 32px;
   padding-bottom: 32px;
   padding-top: 0rem;
+  overflow: auto;
 }
 
 .c10 {
@@ -73,6 +74,7 @@ exports[`Container should render correctly 1`] = `
   -webkit-flex-direction: column;
   -ms-flex-direction: column;
   flex-direction: column;
+  overflow: hidden;
   border-radius: 1rem;
   background-color: #ffffff;
   box-shadow: 0 2px 4px 0 #C4CFDD;
@@ -126,6 +128,7 @@ exports[`Container should render correctly 1`] = `
       </div>
       <div
         class="c6"
+        overflow="auto"
       >
         <div
           class="c7 c1 c8"
@@ -181,6 +184,7 @@ exports[`Container should render correctly 1`] = `
       </div>
       <div
         class="c6"
+        overflow="auto"
       >
         <div
           class="c7 c1 c8"
@@ -215,6 +219,7 @@ exports[`Container should render with table correctly 1`] = `
   padding-bottom: 24px;
   padding-left: 32px;
   padding-right: 32px;
+  overflow: auto;
 }
 
 .c1 {
@@ -497,6 +502,7 @@ exports[`Container should render with table correctly 1`] = `
   -webkit-flex-direction: column;
   -ms-flex-direction: column;
   flex-direction: column;
+  overflow: hidden;
   border-radius: 1rem;
   background-color: #ffffff;
   box-shadow: 0 2px 4px 0 #C4CFDD;
@@ -523,6 +529,7 @@ exports[`Container should render with table correctly 1`] = `
   >
     <div
       class="c3"
+      overflow="auto"
     >
       <h4
         class="c4"
@@ -607,6 +614,7 @@ exports[`Container should render with table correctly 1`] = `
     </div>
     <div
       class="c3"
+      overflow="auto"
     >
       <button
         class="c13"
@@ -625,6 +633,7 @@ exports[`Container should render without title correctly 1`] = `
   padding-right: 32px;
   padding-bottom: 32px;
   padding-top: 24px;
+  overflow: auto;
 }
 
 .c1 {
@@ -639,6 +648,7 @@ exports[`Container should render without title correctly 1`] = `
   -webkit-flex-direction: column;
   -ms-flex-direction: column;
   flex-direction: column;
+  overflow: hidden;
   border-radius: 1rem;
   background-color: #ffffff;
   box-shadow: 0 2px 4px 0 #C4CFDD;
@@ -665,6 +675,7 @@ exports[`Container should render without title correctly 1`] = `
   >
     <div
       class="c3"
+      overflow="auto"
     >
       The content of container
     </div>

diff --git a/src/Container/styles.ts b/src/Container/styles.ts
@@ -5,6 +5,7 @@ import { StyledTableWrapper } from '../Table/styles';
 
 export const StyledContainer = styled(Flex)`
   flex-direction: column;
+  overflow: hidden;
   border-radius: ${(p) => p.theme.radii.xl};
   background-color: ${(p) => p.theme.colors.light};
   box-shadow: ${(p) => p.theme.shadows.base};