5 files changed, 27 insertions, 2 deletions
diff --git a/src/layout/engine.nim b/src/layout/engine.nim
index 7fea2289..525204aa 100644
--- a/src/layout/engine.nim
+++ b/src/layout/engine.nim
@@ -2141,6 +2141,7 @@ proc flushMain(fctx: var FlexContext; mctx: var FlexMainContext;
       it.child.state.margin[odim].start
     fctx.box.applyOverflowDimensions(it.child)
     offset[dim] += it.child.state.size[dim]
+    offset[dim] += it.child.state.margin[dim].send
   fctx.totalMaxSize[dim] = max(fctx.totalMaxSize[dim], offset[dim])
   fctx.mains.add(mctx)
   mctx = FlexMainContext()
@@ -2150,7 +2151,11 @@ proc layoutFlex(bctx: var BlockContext; box: BlockBox; sizes: ResolvedSizes) =
   assert box.inline == nil
   let lctx = bctx.lctx
   var i = 0
-  var fctx = FlexContext(lctx: lctx, box: box)
+  var fctx = FlexContext(
+    lctx: lctx,
+    box: box,
+    offset: offset(x = sizes.padding.left, y = sizes.padding.top)
+  )
   var mctx = FlexMainContext()
   let flexDir = box.computed{"flex-direction"}
   let canWrap = box.computed{"flex-wrap"} != FlexWrapNowrap
@@ -2161,7 +2166,8 @@ proc layoutFlex(bctx: var BlockContext; box: BlockBox; sizes: ResolvedSizes) =
       child.computed)
     let flexBasis = child.computed{"flex-basis"}
     if not flexBasis.auto:
-      childSizes.space[dim] = stretch(flexBasis.px(lctx, sizes.space[dim]))
+      childSizes.space[dim] = stretch(flexBasis.spx(lctx, sizes.space[dim],
+        child.computed, childSizes.padding[dim].sum()))
     lctx.layoutFlexChild(child, childSizes)
     if not flexBasis.auto and childSizes.space.w.isDefinite and
         child.state.xminwidth > childSizes.space.w.u:
diff --git a/test/layout/flex-main-padding-border-box.color.expected b/test/layout/flex-main-padding-border-box.color.expected
new file mode 100644
index 00000000..29e30647
--- /dev/null
+++ b/test/layout/flex-main-padding-border-box.color.expected
@@ -0,0 +1,2 @@
+[48;2;255;0;0mtest                                                                            [49m
+
diff --git a/test/layout/flex-main-padding-border-box.html b/test/layout/flex-main-padding-border-box.html
new file mode 100644
index 00000000..76b21bb4
--- /dev/null
+++ b/test/layout/flex-main-padding-border-box.html
@@ -0,0 +1,6 @@
+<!DOCTYPE html>
+<style>* { box-sizing: border-box }</style>
+<div style="display: flex; margin-right: -2ch; margin-left: -2ch">
+<div style="flex-grow: 0; flex-shrink: 0; flex-basis: 100%; padding-right: 2ch; padding-left: 2ch">
+<div style="background: red">
+test
diff --git a/test/layout/flex-main-padding-margin.expected b/test/layout/flex-main-padding-margin.expected
new file mode 100644
index 00000000..e46c0088
--- /dev/null
+++ b/test/layout/flex-main-padding-margin.expected
@@ -0,0 +1 @@
+  test                                                                  test 2
diff --git a/test/layout/flex-main-padding-margin.html b/test/layout/flex-main-padding-margin.html
new file mode 100644
index 00000000..44d42fe4
--- /dev/null
+++ b/test/layout/flex-main-padding-margin.html
@@ -0,0 +1,10 @@
+<!DOCTYPE html>
+<body>
+<div style="display: flex; padding: 1ch 1em">
+<span style="margin-right: 10ch">
+test
+</span>
+<div style="flex-grow: 1">
+</div>
+<div>
+test 2