diff --git a/doric-demo/src/LayoutTestDemo.ts b/doric-demo/src/LayoutTestDemo.ts
deleted file mode 100644
index 32f02d33..00000000
--- a/doric-demo/src/LayoutTestDemo.ts
+++ /dev/null
@@ -1,311 +0,0 @@
-import { Panel, Group, vlayout, LayoutSpec, text, Color, gravity, stack, layoutConfig, scroller, Gravity, View, hlayout } from "doric";
-
-function grid(title: string, view: View) {
-    return vlayout(
-        [
-            text({
-                text: title,
-                backgroundColor: Color.parse("#3498db"),
-                textColor: Color.WHITE,
-                textAlignment: Gravity.CenterX,
-                layoutConfig: {
-                    widthSpec: LayoutSpec.MOST,
-                    heightSpec: LayoutSpec.JUST,
-                },
-                height: 30
-            }),
-            stack(
-                [
-                    view
-                ],
-                {
-                    layoutConfig: layoutConfig().just(),
-                    width: 300,
-                    height: 300,
-                    backgroundColor: Color.parse("#ecf0f1"),
-                })
-        ])
-
-}
-function content() {
-    return [
-        text({
-            text: "Content",
-            textColor: Color.WHITE,
-            backgroundColor: Color.parse("#34495e"),
-        }),
-        stack(
-            [],
-            {
-                layoutConfig: {
-                    widthSpec: LayoutSpec.JUST,
-                    heightSpec: LayoutSpec.JUST,
-                    margin: {
-                        left: 10,
-                        right: 10,
-                        top: 10,
-                        bottom: 10
-                    }
-                },
-                width: 100,
-                height: 100,
-                backgroundColor: Color.parse("#34495e")
-            })
-    ]
-}
-
-function case1() {
-    return stack(
-        [
-            stack(
-                [
-                    ...content(),
-                ],
-                {
-                    layoutConfig: layoutConfig().most(),
-                    backgroundColor: Color.parse("#1abc9c")
-                })
-        ],
-        {
-            layoutConfig: layoutConfig().fit(),
-            padding: {
-                left: 10, right: 10,
-                top: 10, bottom: 10
-            },
-            backgroundColor: Color.parse("#9b59b6")
-        }
-    )
-}
-
-function case2() {
-    return stack(
-        [
-            stack(
-                [],
-                {
-                    layoutConfig: layoutConfig().most(),
-                    backgroundColor: Color.parse("#1abc9c")
-                }),
-            ...content(),
-        ],
-        {
-            layoutConfig: layoutConfig().fit(),
-            padding: {
-                left: 10, right: 10,
-                top: 10, bottom: 10
-            },
-            backgroundColor: Color.parse("#9b59b6")
-        }
-    )
-}
-
-function case3() {
-    return stack(
-        [
-            case1(),
-        ],
-        {
-            layoutConfig: layoutConfig().fit(),
-            padding: {
-                left: 10, right: 10,
-                top: 10, bottom: 10
-            },
-            backgroundColor: Color.parse("#2ecc71")
-        }
-    )
-}
-
-function case4() {
-    return stack(
-        [
-            case2(),
-        ],
-        {
-            layoutConfig: layoutConfig().fit(),
-            padding: {
-                left: 10, right: 10,
-                top: 10, bottom: 10
-            },
-            backgroundColor: Color.parse("#2ecc71")
-        }
-    )
-}
-
-function case5() {
-    return stack(
-        [
-            case3(),
-        ],
-        {
-            layoutConfig: layoutConfig().fit(),
-            padding: {
-                left: 10, right: 10,
-                top: 10, bottom: 10
-            },
-            backgroundColor: Color.parse("#3498db")
-        }
-    )
-}
-
-
-function case6() {
-    return stack(
-        [
-            case3(),
-        ],
-        {
-            layoutConfig: layoutConfig().fit(),
-            padding: {
-                left: 10, right: 10,
-                top: 10, bottom: 10
-            },
-            backgroundColor: Color.parse("#3498db")
-        }
-    )
-}
-@Entry
-class LayoutTest extends Panel {
-    build(root: Group) {
-        scroller(
-            vlayout(
-                [
-                    grid(
-                        "VLayout fit -> most -> just",
-                        vlayout(
-                            [
-                                stack(
-                                    [
-                                        ...content(),
-                                    ],
-                                    {
-                                        layoutConfig: layoutConfig().most(),
-                                        backgroundColor: Color.parse("#1abc9c"),
-                                        padding: {
-                                            left: 10, right: 10,
-                                            top: 10, bottom: 10,
-                                        }
-                                    })
-                            ],
-                            {
-                                layoutConfig: layoutConfig().fit(),
-                                backgroundColor: Color.parse("#9b59b6"),
-                                padding: {
-                                    left: 10, right: 10,
-                                    top: 10, bottom: 10,
-                                }
-                            })
-                    ),
-                    grid(
-                        "VLayout fit -> most, just",
-                        vlayout(
-                            [
-                                stack(
-                                    [],
-                                    {
-                                        layoutConfig: layoutConfig().most(),
-                                        backgroundColor: Color.parse("#1abc9c"),
-                                        padding: {
-                                            left: 10, right: 10,
-                                            top: 10, bottom: 10,
-                                        }
-                                    }),
-                                ...content(),
-                            ],
-                            {
-                                layoutConfig: layoutConfig().fit(),
-                                backgroundColor: Color.parse("#9b59b6"),
-                                padding: {
-                                    left: 10, right: 10,
-                                    top: 10, bottom: 10,
-                                }
-                            })
-                    ),
-                    grid(
-                        "HLayout fit -> most -> just",
-                        hlayout(
-                            [
-                                stack(
-                                    [
-                                        ...content(),
-                                    ],
-                                    {
-                                        layoutConfig: layoutConfig().most(),
-                                        backgroundColor: Color.parse("#1abc9c"),
-                                        padding: {
-                                            left: 10, right: 10,
-                                            top: 10, bottom: 10,
-                                        }
-                                    })
-                            ],
-                            {
-                                layoutConfig: layoutConfig().fit(),
-                                backgroundColor: Color.parse("#9b59b6"),
-                                padding: {
-                                    left: 10, right: 10,
-                                    top: 10, bottom: 10,
-                                }
-                            })
-                    ),
-                    grid(
-                        "HLayout fit -> most, just",
-                        hlayout(
-                            [
-                                stack(
-                                    [],
-                                    {
-                                        layoutConfig: layoutConfig().most(),
-                                        backgroundColor: Color.parse("#1abc9c"),
-                                        padding: {
-                                            left: 10, right: 10,
-                                            top: 10, bottom: 10,
-                                        }
-                                    }),
-                                ...content(),
-                            ],
-                            {
-                                layoutConfig: layoutConfig().fit(),
-                                backgroundColor: Color.parse("#9b59b6"),
-                                padding: {
-                                    left: 10, right: 10,
-                                    top: 10, bottom: 10,
-                                }
-                            })
-                    ),
-                    grid(
-                        "Stack fit -> most -> just",
-                        case1(),
-                    ),
-                    grid(
-                        "Stack fit -> most, just",
-                        case2(),
-                    ),
-                    grid(
-                        "Stack fit -> fit -> most -> just",
-                        case3(),
-                    ),
-                    grid(
-                        "Stack fit -> fit -> most, just",
-                        case4(),
-                    ),
-                    grid(
-                        "Stack fit -> fit -> fit -> most -> just",
-                        case5(),
-                    ),
-                    grid(
-                        "Stack fit -> fit -> fit -> most, just",
-                        case6(),
-                    ),
-                ],
-                {
-                    layoutConfig: {
-                        widthSpec: LayoutSpec.MOST,
-                        heightSpec: LayoutSpec.FIT,
-                    },
-                    gravity: Gravity.CenterX,
-                    space: 20,
-                }),
-            {
-                layoutConfig: layoutConfig().most(),
-            }).in(root)
-    }
-}
\ No newline at end of file
diff --git a/doric-demo/src/LayoutTestDemo.tsx b/doric-demo/src/LayoutTestDemo.tsx
new file mode 100644
index 00000000..50a3ad65
--- /dev/null
+++ b/doric-demo/src/LayoutTestDemo.tsx
@@ -0,0 +1,292 @@
+import {
+  jsx,
+  Panel,
+  Group,
+  Color,
+  layoutConfig,
+  Gravity,
+  Scroller,
+  VLayout,
+  Text,
+  Stack,
+  HLayout,
+} from "doric";
+
+function Grid(props: { title: string; innerElement: JSX.Element }) {
+  return (
+    <VLayout>
+      <Text
+        text={props.title}
+        backgroundColor={Color.parse("#3498db")}
+        textColor={Color.WHITE}
+        textAlignment={Gravity.CenterX}
+        layoutConfig={layoutConfig().mostWidth().justHeight()}
+        height={30}
+      />
+      <Stack
+        layoutConfig={layoutConfig().just()}
+        width={300}
+        height={300}
+        backgroundColor={Color.parse("#ecf0f1")}
+      >
+        {props.innerElement}
+      </Stack>
+    </VLayout>
+  );
+}
+
+function Content() {
+  return (
+    <>
+      <Text textColor={Color.WHITE} backgroundColor={Color.parse("#34495e")}>
+        Content
+      </Text>
+      <Stack
+        layoutConfig={layoutConfig().just().configMargin({
+          left: 10,
+          right: 10,
+          top: 10,
+          bottom: 10,
+        })}
+        width={100}
+        height={100}
+        backgroundColor={Color.parse("#34495e")}
+      />
+    </>
+  );
+}
+
+function Case1() {
+  return (
+    <Stack
+      padding={{
+        left: 10,
+        right: 10,
+        top: 10,
+        bottom: 10,
+      }}
+      backgroundColor={Color.parse("#9b59b6")}
+    >
+      <Stack
+        layoutConfig={layoutConfig().most()}
+        backgroundColor={Color.parse("#1abc9c")}
+      >
+        <Content />
+      </Stack>
+    </Stack>
+  );
+}
+
+function Case2() {
+  return (
+    <Stack
+      padding={{
+        left: 10,
+        right: 10,
+        top: 10,
+        bottom: 10,
+      }}
+      backgroundColor={Color.parse("#9b59b6")}
+    >
+      <Stack
+        layoutConfig={layoutConfig().most()}
+        backgroundColor={Color.parse("#1abc9c")}
+      ></Stack>
+      <Content />
+    </Stack>
+  );
+}
+
+function Case3() {
+  return (
+    <Stack
+      backgroundColor={Color.parse("#2ecc71")}
+      padding={{
+        left: 10,
+        right: 10,
+        top: 10,
+        bottom: 10,
+      }}
+    >
+      <Case1 />
+    </Stack>
+  );
+}
+function Case4() {
+  return (
+    <Stack
+      backgroundColor={Color.parse("#2ecc71")}
+      padding={{
+        left: 10,
+        right: 10,
+        top: 10,
+        bottom: 10,
+      }}
+    >
+      <Case2 />
+    </Stack>
+  );
+}
+
+function Case5() {
+  return (
+    <Stack
+      backgroundColor={Color.parse("#3498db")}
+      padding={{
+        left: 10,
+        right: 10,
+        top: 10,
+        bottom: 10,
+      }}
+    >
+      <Case3 />
+    </Stack>
+  );
+}
+
+function Case6() {
+  return (
+    <Stack
+      backgroundColor={Color.parse("#3498db")}
+      padding={{
+        left: 10,
+        right: 10,
+        top: 10,
+        bottom: 10,
+      }}
+    >
+      <Case3 />
+    </Stack>
+  );
+}
+
+@Entry
+class LayoutTest extends Panel {
+  build(root: Group) {
+    <Scroller parent={root} layoutConfig={layoutConfig().most()}>
+      <VLayout
+        layoutConfig={layoutConfig().mostWidth().fitHeight()}
+        gravity={Gravity.Center}
+      >
+        <Grid title="VLayout fit -> most -> just">
+          <VLayout
+            layoutConfig={layoutConfig().fit()}
+            padding={{
+              left: 10,
+              right: 10,
+              top: 10,
+              bottom: 10,
+            }}
+            backgroundColor={Color.parse("#9b59b6")}
+          >
+            <Stack
+              layoutConfig={layoutConfig().most()}
+              backgroundColor={Color.parse("#1abc9c")}
+              padding={{
+                left: 10,
+                right: 10,
+                top: 10,
+                bottom: 10,
+              }}
+            >
+              <Content></Content>
+            </Stack>
+          </VLayout>
+        </Grid>
+        <Grid title="VLayout fit -> most, just">
+          <VLayout
+            layoutConfig={layoutConfig().fit()}
+            padding={{
+              left: 10,
+              right: 10,
+              top: 10,
+              bottom: 10,
+            }}
+            backgroundColor={Color.parse("#9b59b6")}
+          >
+            <Stack
+              layoutConfig={layoutConfig().most()}
+              backgroundColor={Color.parse("#1abc9c")}
+              padding={{
+                left: 10,
+                right: 10,
+                top: 10,
+                bottom: 10,
+              }}
+            ></Stack>
+            <Content></Content>
+          </VLayout>
+        </Grid>
+
+        <Grid title="HLayout fit -> most -> just">
+          <HLayout
+            layoutConfig={layoutConfig().fit()}
+            padding={{
+              left: 10,
+              right: 10,
+              top: 10,
+              bottom: 10,
+            }}
+            backgroundColor={Color.parse("#9b59b6")}
+          >
+            <Stack
+              layoutConfig={layoutConfig().most()}
+              backgroundColor={Color.parse("#1abc9c")}
+              padding={{
+                left: 10,
+                right: 10,
+                top: 10,
+                bottom: 10,
+              }}
+            >
+              <Content></Content>
+            </Stack>
+          </HLayout>
+        </Grid>
+        <Grid title="HLayout fit -> most, just">
+          <HLayout
+            layoutConfig={layoutConfig().fit()}
+            padding={{
+              left: 10,
+              right: 10,
+              top: 10,
+              bottom: 10,
+            }}
+            backgroundColor={Color.parse("#9b59b6")}
+          >
+            <Stack
+              layoutConfig={layoutConfig().most()}
+              backgroundColor={Color.parse("#1abc9c")}
+              padding={{
+                left: 10,
+                right: 10,
+                top: 10,
+                bottom: 10,
+              }}
+            ></Stack>
+            <Content></Content>
+          </HLayout>
+        </Grid>
+        <Grid title="Stack fit -> most -> just">
+          <Case1 />
+        </Grid>
+
+        <Grid title="Stack fit -> most, just">
+          <Case2 />
+        </Grid>
+        <Grid title="Stack fit -> fit -> most -> just">
+          <Case3 />
+        </Grid>
+        <Grid title="Stack fit -> fit -> most, just">
+          <Case4 />
+        </Grid>
+        <Grid title="Stack fit -> fit -> fit -> most -> just">
+          <Case5 />
+        </Grid>
+        <Grid title="Stack fit -> fit -> fit -> most, just">
+          <Case6 />
+        </Grid>
+      </VLayout>
+    </Scroller>;
+  }
+}
diff --git a/doric-iOS/Pod/Classes/Shader/DoricLayouts.m b/doric-iOS/Pod/Classes/Shader/DoricLayouts.m
index e499acf3..b9e85326 100644
--- a/doric-iOS/Pod/Classes/Shader/DoricLayouts.m
+++ b/doric-iOS/Pod/Classes/Shader/DoricLayouts.m
@@ -92,6 +92,8 @@ - (DoricLayout *)doricLayout {
 @end
 
 @interface DoricLayout ()
+@property(nonatomic,assign) BOOL reassignWidth;
+@property(nonatomic,assign) BOOL reassignHeight;
 @end
 
 @implementation DoricLayout
@@ -103,6 +105,8 @@ - (instancetype)init {
         _maxHeight = CGFLOAT_MAX;
         _minWidth = CGFLOAT_MIN;
         _minHeight = CGFLOAT_MIN;
+        _reassignWidth = NO;
+        _reassignHeight = NO;
     }
     return self;
 }
@@ -192,6 +196,8 @@ - (BOOL)restrainSize {
 }
 
 - (void)measureContent:(CGSize)targetSize {
+    self.reassignWidth = NO;
+    self.reassignHeight = NO;
     switch (self.layoutType) {
         case DoricStack: {
             [self measureStackContent:targetSize];
@@ -218,6 +224,23 @@ - (void)measureContent:(CGSize)targetSize {
     if (self.view.superview.doricLayout.heightSpec == DoricLayoutFit && self.heightSpec == DoricLayoutMost) {
         self.measuredHeight = self.contentHeight + self.paddingTop + self.paddingBottom;
     }
+
+    if (self.view.superview.doricLayout.layoutType == DoricHLayout
+            && self.view.superview.doricLayout.widthSpec == DoricLayoutFit
+            && self.weight > 0
+            && self.widthSpec == DoricLayoutJust
+            ) {
+        self.measuredWidth = self.contentWidth + self.paddingLeft + self.paddingRight + self.width;
+        self.reassignWidth = YES;
+    }
+    if (self.view.superview.doricLayout.layoutType == DoricVLayout
+            && self.view.superview.doricLayout.heightSpec == DoricLayoutFit
+            && self.weight > 0
+            && self.heightSpec == DoricLayoutJust
+            ) {
+        self.measuredHeight = self.contentHeight + self.paddingTop + self.paddingBottom + self.height;
+        self.reassignHeight = YES;
+    }
 }
 
 - (void)layout {
@@ -401,7 +424,7 @@ - (void)measureVLayoutContent:(CGSize)targetSize {
         contentHeight -= self.spacing;
     }
 
-    if (contentWeight > 0) {
+    if (contentWeight > 0 && self.heightSpec != DoricLayoutFit) {
         CGFloat remaining = targetSize.height - contentHeight;
         contentWidth = 0;
         contentHeight = 0;
@@ -459,7 +482,7 @@ - (void)measureHLayoutContent:(CGSize)targetSize {
         contentWidth -= self.spacing;
     }
 
-    if (contentWeight > 0) {
+    if (contentWeight > 0 && self.widthSpec != DoricLayoutFit) {
         CGFloat remaining = targetSize.width - contentWidth;
         contentWidth = 0;
         contentHeight = 0;
@@ -504,10 +527,10 @@ - (void)layoutStack {
         if (layout.disabled) {
             continue;
         }
-        if (self.widthSpec == DoricLayoutFit && layout.widthSpec == DoricLayoutMost) {
+        if ((self.widthSpec == DoricLayoutFit || self.reassignWidth) && layout.widthSpec == DoricLayoutMost) {
             layout.measuredWidth = self.contentWidth - layout.marginLeft - layout.marginRight;
         }
-        if (self.heightSpec == DoricLayoutFit && layout.heightSpec == DoricLayoutMost) {
+        if ((self.heightSpec == DoricLayoutFit || self.reassignHeight) && layout.heightSpec == DoricLayoutMost) {
             layout.measuredHeight = self.contentHeight - layout.marginTop - layout.marginBottom;
         }
         [layout layout];
@@ -563,7 +586,7 @@ - (void)layoutVLayout {
         if (layout.disabled) {
             continue;
         }
-        if (self.widthSpec == DoricLayoutFit && layout.widthSpec == DoricLayoutMost) {
+        if ((self.widthSpec == DoricLayoutFit || self.reassignWidth) && layout.widthSpec == DoricLayoutMost) {
             layout.measuredWidth = self.contentWidth - layout.marginLeft - layout.marginRight;
         }
         [layout layout];
@@ -606,7 +629,7 @@ - (void)layoutHLayout {
             continue;
         }
 
-        if (self.heightSpec == DoricLayoutFit && layout.heightSpec == DoricLayoutMost) {
+        if ((self.heightSpec == DoricLayoutFit || self.reassignHeight) && layout.heightSpec == DoricLayoutMost) {
             layout.measuredHeight = self.contentHeight - layout.marginTop - layout.marginBottom;
         }