From afed439eae7539f724c45a7e1ca5ef3e3b33092a Mon Sep 17 00:00:00 2001
From: Vitaly Rtishchev <rtivital@gmail.com>
Date: Mon, 2 Oct 2023 10:00:47 +0400
Subject: [PATCH] [@mantine/core] Container: Fix nested Container components
 inheriting some properties from parent Container component (#4859)

---
 .../src/components/Container/Container.module.css      |  4 ++--
 .../src/components/Container/Container.story.tsx       | 10 ++++++++++
 .../src/components/Container/Container.tsx             |  4 ++--
 3 files changed, 14 insertions(+), 4 deletions(-)

diff --git a/src/mantine-core/src/components/Container/Container.module.css b/src/mantine-core/src/components/Container/Container.module.css
index 44ba05382d0..1a66db87858 100644
--- a/src/mantine-core/src/components/Container/Container.module.css
+++ b/src/mantine-core/src/components/Container/Container.module.css
@@ -8,11 +8,11 @@
 
   padding-left: var(--mantine-spacing-md);
   padding-right: var(--mantine-spacing-md);
-  max-width: var(--_container-size, var(--container-size));
+  max-width: var(--container-size);
   margin-left: auto;
   margin-right: auto;
 
   &[data-fluid] {
-    --_container-size: 100%;
+    --container-size: 100%;
   }
 }
diff --git a/src/mantine-core/src/components/Container/Container.story.tsx b/src/mantine-core/src/components/Container/Container.story.tsx
index 95498e78d7c..ed549863a42 100644
--- a/src/mantine-core/src/components/Container/Container.story.tsx
+++ b/src/mantine-core/src/components/Container/Container.story.tsx
@@ -36,3 +36,13 @@ export function Usage() {
     </MantineThemeProvider>
   );
 }
+
+export function NonFluidWithinFluid() {
+  return (
+    <Container fluid h={50} bg="blue">
+      <Container h={50} bg="red">
+        Child container
+      </Container>
+    </Container>
+  );
+}
diff --git a/src/mantine-core/src/components/Container/Container.tsx b/src/mantine-core/src/components/Container/Container.tsx
index 77c2b37204f..58a81addbd3 100644
--- a/src/mantine-core/src/components/Container/Container.tsx
+++ b/src/mantine-core/src/components/Container/Container.tsx
@@ -39,9 +39,9 @@ export type ContainerFactory = Factory<{
 
 const defaultProps: Partial<ContainerProps> = {};
 
-const varsResolver = createVarsResolver<ContainerFactory>((_, { size }) => ({
+const varsResolver = createVarsResolver<ContainerFactory>((_, { size, fluid }) => ({
   root: {
-    '--container-size': getSize(size, 'container-size'),
+    '--container-size': fluid ? undefined : getSize(size, 'container-size'),
   },
 }));