revert: Container overflow constrained to the content slot (#2864) (#…

…2907)

src/container/styles.scss

@@ -16,7 +16,6 @@
  display: flex;
  flex-direction: column;
  block-size: 100%;
-
  &.with-side-media {
  flex-direction: row;
  }
@@ -38,15 +37,13 @@
  border-end-start-radius: 0;
  border-block-end-width: 0;
  }
-
  // Meld container top corners into preceding container
  &-stacked + &-stacked,
  &-stacked + &-stacked::before,
  &-stacked + &-stacked::after {
  border-start-start-radius: 0;
  border-start-end-radius: 0;
  }
-
  // Replace container border with a divider
  &-stacked + &-stacked:not(.refresh)::before {
  @include shared.divider;
@@ -58,7 +55,6 @@
  &::before {
  inset-block-start: calc(-1 * #{awsui.$border-container-top-width});
  }
-
  &.variant-stacked::before {
  inset-block-start: calc(-1 * #{awsui.$border-divider-section-width});
  }
@@ -79,7 +75,6 @@
  display: flex;
  flex-direction: column;
  inline-size: 100%;
-
  &-fit-height {
  block-size: 100%;
  overflow: hidden;
@@ -108,7 +103,6 @@
  border-block: 0;
  border-inline: 0;
  }
-
  // stylelint-enable @cloudscape-design/no-implicit-descendant, selector-max-type
 
  // reduce border-radius size to fill the visual gap between the parent border and image
@@ -129,14 +123,12 @@
  background-color: awsui.$color-background-container-header;
  border-start-start-radius: awsui.$border-radius-container;
  border-start-end-radius: awsui.$border-radius-container;
-
  &.header-full-page {
  background-color: awsui.$color-background-layout-main;
  }
 
  &.header-with-media {
  background: none;
-
  &:not(:empty) {
  border-block-end: none;
  }
@@ -166,7 +158,6 @@
  border-block: 0;
  border-inline: 0;
  }
-
  &:not(.header-variant-cards) {
  box-shadow: awsui.$shadow-sticky-embedded;
  }
@@ -200,7 +191,6 @@
  &-variant-cards {
  // Border and shadows are applied with ::before and ::after elements (respectively)
  @include styles.container-style;
-
  &:not(.header-sticky-enabled) {
  position: relative;
  }
@@ -254,21 +244,17 @@
 
 .content {
  flex: 1;
-
  &-fit-height {
  overflow: auto;
  }
-
- // Using margins instead of paddings so that the content overflow works correctly.
  &.with-paddings {
- margin-block: awsui.$space-scaled-l;
- margin-inline: awsui.$space-container-horizontal;
+ padding-block: awsui.$space-scaled-l;
+ padding-inline: awsui.$space-container-horizontal;
 
  .header + & {
- margin-block-start: awsui.$space-container-content-top;
-
+ padding-block-start: awsui.$space-container-content-top;
  &.content-with-media {
- margin-block-start: 0;
+ padding-block-start: 0;
  }
  }
  }

src/table/__integ__/sticky-scrollbar.test.ts

@@ -45,7 +45,8 @@ describe('Sticky scrollbar', () => {
  }, visualRefresh)
  );
 
- test(
+ // Skipped because #2864 is reverted.
+ test.skip(
  'sticky scrollbar is at the bottom when rendered inside container with fit-height',
  useBrowser(async browser => {
  const page = new BasePageObject(browser);