diff --git a/packages/builder/src/components/userInterface/AppPreview/CurrentItemPreview.svelte b/packages/builder/src/components/userInterface/AppPreview/CurrentItemPreview.svelte
index c4cdae4bfa..85c50711ae 100644
--- a/packages/builder/src/components/userInterface/AppPreview/CurrentItemPreview.svelte
+++ b/packages/builder/src/components/userInterface/AppPreview/CurrentItemPreview.svelte
@@ -28,7 +28,9 @@
       _id: "screenslot-placeholder",
       _component: "@budibase/standard-components/container",
       _styles: {
-        normal: {},
+        normal: {
+          flex: "1 1 auto",
+        },
         hover: {},
         active: {},
         selected: {},
@@ -46,6 +48,7 @@
               display: "flex",
               "flex-direction": "column",
               "align-items": "center",
+              flex: "1 1 auto",
             },
             hover: {},
             active: {},
diff --git a/packages/builder/src/components/userInterface/AppPreview/iframeTemplate.js b/packages/builder/src/components/userInterface/AppPreview/iframeTemplate.js
index edb35bb668..4ef5fbff8e 100644
--- a/packages/builder/src/components/userInterface/AppPreview/iframeTemplate.js
+++ b/packages/builder/src/components/userInterface/AppPreview/iframeTemplate.js
@@ -11,38 +11,22 @@ export default `<html>
       *, *:before, *:after {
         box-sizing: border-box;
       }
-      .lay-__screenslot__text {
-          width: 100%;
-          height: 100%;
-          display: flex;
-          justify-content: center;
-          align-items: center;
-          padding: 20px 0;
-          border: dashed 2px #ccc;
-          font-family: sans-serif;
-          font-size: 1.2rem;
-          color: #999;
-          text-transform: uppercase;
-          font-weight: bold;
-        }
-
-        .container-screenslot-placeholder {
-          display: flex;
-          align-items: center;
-          justify-content: center;
-          padding: 20px;
-          text-align: center;
-          border-style: dashed !important;
-          border-width: 1px;
-          color: #000000;
-          background: #fafafa;
-          height: 94%;
-        }
-
-        .container-screenslot-placeholder span {
-          display: block;
-          margin-bottom: 10px;
-        }
+      .container-screenslot-placeholder {
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        padding: 20px;
+        text-align: center;
+        border-style: dashed !important;
+        border-width: 1px;
+        color: #000000;
+        background: #fafafa;
+        flex: 1 1 auto;
+      }
+      .container-screenslot-placeholder span {
+        display: block;
+        margin-bottom: 10px;
+      }
     </style>
     <script src='/assets/budibase-client.js'></script>
     <script>
diff --git a/packages/builder/src/components/userInterface/propertyCategories.js b/packages/builder/src/components/userInterface/propertyCategories.js
index bae44df7f5..efaa8fbd33 100644
--- a/packages/builder/src/components/userInterface/propertyCategories.js
+++ b/packages/builder/src/components/userInterface/propertyCategories.js
@@ -261,6 +261,16 @@ export const padding = [
 ]
 
 export const size = [
+  {
+    label: "Flex",
+    key: "flex",
+    control: OptionSelect,
+    defaultValue: "0 1 auto",
+    options: [
+      { label: "Shrink", value: "0 1 auto" },
+      { label: "Grow", value: "1 1 auto" },
+    ],
+  },
   {
     label: "Width",
     key: "width",
diff --git a/packages/server/src/utilities/appDirectoryTemplate/pages/main/page.json b/packages/server/src/utilities/appDirectoryTemplate/pages/main/page.json
index 916ad5d224..037c385f5c 100644
--- a/packages/server/src/utilities/appDirectoryTemplate/pages/main/page.json
+++ b/packages/server/src/utilities/appDirectoryTemplate/pages/main/page.json
@@ -1,9 +1,9 @@
 {
-	"title": "{{ name }}",
-	"favicon": "./_shared/favicon.png",
-	"stylesheets": [],
-	"componentLibraries": ["@budibase/standard-components"],
-	"props": {
+  "title": "{{ name }}",
+  "favicon": "./_shared/favicon.png",
+  "stylesheets": [],
+  "componentLibraries": ["@budibase/standard-components"],
+  "props": {
     "_id": "private-master-root",
     "_component": "@budibase/standard-components/container",
     "_children": [
@@ -62,10 +62,11 @@
         "_component": "##builtin/screenslot",
         "_styles": {
           "normal": {
-            "padding": "0px",
-            "align-items": "flex-start",
-            "height": "100vh",
-            "background-image": "None"
+            "flex": "1 1 auto",
+            "display": "flex",
+            "flex-direction": "column",
+            "justify-content": "flex-start",
+            "align-items": "stretch"
           },
           "hover": {},
           "active": {},
@@ -84,10 +85,9 @@
         "flex-direction": "column",
         "align-items": "stretch",
         "justify-content": "flex-start",
-        "height": "",
-        "max-width": "",
         "margin-right": "auto",
-        "margin-left": "auto"
+        "margin-left": "auto",
+        "min-height": "100%"
       },
       "selected": {}
     },
@@ -95,6 +95,6 @@
     "className": "",
     "onLoad": []
   },
-	"_css": "",
-	"uiFunctions": ""
+  "_css": "",
+  "uiFunctions": ""
 }
