From c6d158c7467316e6f37e0e5b58a662c6c7091249 Mon Sep 17 00:00:00 2001
From: Florian Dreschner <fdresch@amazon.com>
Date: Wed, 3 Aug 2022 13:29:24 +0000
Subject: [PATCH] fix(container): Prevent overflowing content

---
 pages/container/simple.page.tsx | 11 ++++++
 src/container/styles.scss       | 59 +++++++++++++++++++++++----------
 2 files changed, 53 insertions(+), 17 deletions(-)

diff --git a/pages/container/simple.page.tsx b/pages/container/simple.page.tsx
index c91a2c7f27..c7a5541955 100644
--- a/pages/container/simple.page.tsx
+++ b/pages/container/simple.page.tsx
@@ -97,6 +97,17 @@ export default function SimpleContainers() {
               tortor, mollis vitae molestie sed, malesuada.
             </Container>
           </div>
+          <Container
+            disableContentPaddings={true}
+            disableHeaderPaddings={true}
+            header={<div style={{ background: 'rgba(255, 0, 0, 0.1)', width: '100%' }}>Header Area</div>}
+            footer="Footer"
+          >
+            <div style={{ background: 'rgba(0, 0, 255, 0.1)', width: '100%' }}>Content Area</div>
+          </Container>
+          <Container disableContentPaddings={true}>
+            <div style={{ background: 'rgba(0, 0, 255, 0.1)', width: '100%' }}>Content Area</div>
+          </Container>
         </SpaceBetween>
       </ScreenshotArea>
     </article>
diff --git a/src/container/styles.scss b/src/container/styles.scss
index c178d70800..9a67c545b4 100644
--- a/src/container/styles.scss
+++ b/src/container/styles.scss
@@ -11,28 +11,28 @@
   @include styles.styles-reset;
   display: block;
   word-wrap: break-word;
-  &.variant {
-    &-default,
-    &-stacked {
-      @include shared.borders-and-shadows;
-      background-color: awsui.$color-background-container-content;
-    }
-    &-stacked:not(:last-child) {
-      border-bottom-right-radius: 0;
-      border-bottom-left-radius: 0;
-    }
-    &-stacked + &-stacked {
-      @include shared.divider;
-      border-top-left-radius: 0;
-      border-top-right-radius: 0;
-      box-shadow: awsui.$shadow-container-stacked;
-    }
+
+  &.variant-default,
+  &.variant-stacked {
+    @include shared.borders-and-shadows;
+    background-color: awsui.$color-background-container-content;
+  }
+
+  &.variant-stacked:not(:last-child) {
+    border-bottom-right-radius: 0;
+    border-bottom-left-radius: 0;
+  }
+
+  &.variant-stacked + &.variant-stacked {
+    @include shared.divider;
+    border-top-left-radius: 0;
+    border-top-right-radius: 0;
+    box-shadow: awsui.$shadow-container-stacked;
   }
 }
 
 .header {
   background-color: awsui.$color-background-container-header;
-  border-radius: awsui.$border-container-radius;
   // sticky positioning may be disabled (on mobile or if browser does not support it),
   // but some markup still requires a new stacking context
   &-sticky-disabled {
@@ -96,6 +96,31 @@ the default white background of the container component.
   }
 }
 
+/*
+ * Applies border-radius constraint from parent to children with `overflow:auto`
+ * to prevent content exceeding the parent container if border-radius is not 0.
+ * Stacked containers mirror the parent behavior by having border-radius set to 0.
+ */
+.root.header,
+.root.content:first-child {
+  border-top-left-radius: awsui.$border-container-radius;
+  border-top-right-radius: awsui.$border-container-radius;
+  overflow: auto;
+}
+
+.root.header:last-child,
+.root.content:last-child {
+  border-bottom-left-radius: awsui.$border-container-radius;
+  border-bottom-right-radius: awsui.$border-container-radius;
+  overflow: auto;
+}
+
+.root.variant-stacked + .root.variant-stacked > .header,
+.root.variant-stacked + .root.variant-stacked > .content:first-child {
+  border-top-left-radius: 0;
+  border-top-right-radius: 0;
+}
+
 .footer {
   &.with-paddings {
     padding: shared.$footer-padding;