Fix Scrolls

App.css

@@ -12,6 +12,7 @@
   height: 100vh; 
   overflow: hidden;
   background-color:#dfdfdf; 
+  display: flex;
 }
 .mainbar{
   z-index: 1;
@@ -52,8 +53,7 @@
   padding-bottom: 10px;
   padding-left:20px;
   width: 258px;
-  overflow-y: scroll;
-  overflow-x: hidden;
+  overflow: auto;
 }
 
 .horizontal_bars .sidebar{
@@ -62,7 +62,7 @@
   flex-shrink: 0;
   background: #F1F1F1 0% 0% no-repeat padding-box;
   opacity: 1;
-  overflow: scroll;
+  overflow: auto;
 }
 
 
@@ -93,6 +93,7 @@ body {
   flex-direction: row;
   flex-grow: 1;
   position: relative;
+  min-height: 0;
 }
  .horizontal_bars .wrapper .sidebar{
   width: 311px;

App.js

@@ -67,7 +67,7 @@ export default class App extends React.Component {
         <div className="mainbar">
           {this.GUI.renderMainBar()}
         </div>
-        <div style={{position: 'relative'}}>
+        <div style={{position: 'relative', minHeight: 0, flexGrow: 1, overflow: 'auto', display: 'flex'}}>
          
           <div className="horizontal_bars">
             <div ref={this.toolboxRef} className="toolbox">
@@ -80,7 +80,7 @@ export default class App extends React.Component {
                 {  this.GUI.renderPageBar()}
               </div>
               <div className="wrapperPhone">
-                <div style={{flex:1}}>
+                <div style={{flex:1,overflow: 'auto'}}>
                   {/*This is a comment*/}
                   <div onClick={(e) => this.dragPage(e)} className="playground" style={{zoom:this.state.zoom}}>
                     <div className="phone">