diff --git a/demo/DemoApp.tsx b/demo/DemoApp.tsx
index c8cbdc9..25b2b29 100644
--- a/demo/DemoApp.tsx
+++ b/demo/DemoApp.tsx
@@ -500,6 +500,28 @@ export function DemoApp()
 				<button onClick={easySubapp}>
 					Easy with callable subapp
 				</button>
+
+				<button onClick={() => {
+					subapps.open(
+						<Subapp title={"Very long subapp"}>
+							<Card><p>A test content.</p></Card>
+							<Card><p>A test content.</p></Card>
+							<Card><p>A test content.</p></Card>
+							<Card><p>A test content.</p></Card>
+							<Card><p>A test content.</p></Card>
+							<Card><p>A test content.</p></Card>
+							<Card><p>A test content.</p></Card>
+							<Card><p>A test content.</p></Card>
+							<Card><p>A test content.</p></Card>
+							<Card><p>A test content.</p></Card>
+							<Card><p>A test content.</p></Card>
+							<Card><p>A test content.</p></Card>
+							<Card><p>A test content.</p></Card>
+							<Card><p>A test content.</p></Card>
+						</Subapp>
+					)
+				}}>A long subapp
+				</button>
 			</Card>
 
 			<h3>Modals</h3>
diff --git a/src/styles/components/_subapp.less b/src/styles/components/_subapp.less
index 246bf55..0534c3a 100644
--- a/src/styles/components/_subapp.less
+++ b/src/styles/components/_subapp.less
@@ -7,6 +7,9 @@
 	top: @subapp-margin;
 	left: @subapp-margin;
 
+	display: flex;
+	flex-direction: column;
+
 	width: calc(100% - (2 * @subapp-margin));
 	height: calc(100% - (2 * @subapp-margin));
 	border-radius: 0.25em;
@@ -64,6 +67,10 @@
 
 	> main
 	{
+		flex: 1;
+
 		padding: 1em;
+
+		overflow: auto;
 	}
 }