diff --git a/src/elements/container/container/container.visual.spec.ts b/src/elements/container/container/container.visual.spec.ts index 8de8704e37..792bbfc50b 100644 --- a/src/elements/container/container/container.visual.spec.ts +++ b/src/elements/container/container/container.visual.spec.ts @@ -25,14 +25,16 @@ describe(`sbb-container`, () => { See more `; + const wrapperStyles = { backgroundColor: 'var(--sbb-color-silver)', padding: '0' }; + describeViewports({ viewportHeight: 600 }, () => { for (const color of colorCases) { it( `color=${color}`, visualDiffDefault.with(async (setup) => { await setup.withFixture( - html` ${containerContent()} `, - { backgroundColor: 'var(--sbb-color-silver)', padding: '0' }, + html`${containerContent()}`, + wrapperStyles, ); }), ); @@ -42,8 +44,27 @@ describe(`sbb-container`, () => { `expanded`, visualDiffDefault.with(async (setup) => { await setup.withFixture( - html` ${containerContent()} `, - { backgroundColor: 'var(--sbb-color-silver)', padding: '0' }, + html`${containerContent()}`, + wrapperStyles, + ); + }), + ); + }); + + describeViewports({ viewports: ['medium'] }, () => { + it( + `nested`, + visualDiffDefault.with(async (setup) => { + await setup.withFixture( + html` + + ${containerContent()} +
+ ${containerContent()} +
+
+ `, + wrapperStyles, ); }), ); diff --git a/src/elements/core/styles/mixins/helpers.scss b/src/elements/core/styles/mixins/helpers.scss index ea8049f779..2bc9d87679 100644 --- a/src/elements/core/styles/mixins/helpers.scss +++ b/src/elements/core/styles/mixins/helpers.scss @@ -41,6 +41,7 @@ display: block; visibility: hidden; height: 0; + overflow: hidden; } }