From f4959745988d3fa5eb2f76f7053a18390f040dde Mon Sep 17 00:00:00 2001
From: josdejong <wjosdejong@gmail.com>
Date: Mon, 4 May 2020 21:58:04 +0200
Subject: [PATCH] Fix overflow of contents

---
 src/JSONEditor.svelte | 27 ++++++++++++++++++---------
 1 file changed, 18 insertions(+), 9 deletions(-)

diff --git a/src/JSONEditor.svelte b/src/JSONEditor.svelte
index 3377ebf..8c5c7b8 100644
--- a/src/JSONEditor.svelte
+++ b/src/JSONEditor.svelte
@@ -55,13 +55,15 @@
 	<div class="menu">
 		<Icon data={faSearch} /> Search: <input class="search-input" bind:value={searchText} />
 	</div>
-	<Node
-    value={json}
-    searchResult={searchResult}
-    expanded={true}
-    onChangeKey={handleChangeKey}
-    onChangeValue={handleChangeValue}
-	/>
+  <div class="contents">
+    <Node
+      value={json}
+      searchResult={searchResult}
+      expanded={true}
+      onChangeKey={handleChangeKey}
+      onChangeValue={handleChangeValue}
+    />
+  </div>
 </div>
 
 <style type="text/scss">
@@ -71,7 +73,9 @@
 		border: 1px solid gray;
 		width: 100%;
 		height: 100%;
-		min-height: 150px;
+    min-height: 150px;
+    display: flex;
+    flex-direction: column;
 
 		.menu {
       font-family: $font-family-menu;
@@ -87,6 +91,11 @@
         font-size: $font-size;
         padding: $input-padding;
       }
-		}
+    }
+    
+    .contents {
+      flex: 1;
+      overflow: auto;
+    }
 	}
 </style>