Hey guys,
below you can see the basic layout of the app. I want that all divs are independently scrollable from each other and do not influence the main app size. Pretty similar behavior you’d expect from a code editor.
layout
I thought it would be fairly easy. What I did was to set the body to overflow hidden. Then I created a div which holds the 3 windows and set each window to overflow scroll. However, this did not dso the trick. I am writing this in react. I try to share the important code below.
App.js
jsx:
<div className="App">
<div>
<SideMenu />
</div>
<div>
<MainWindow />
</div>
</div>
scss:
.App {
background-color: $main-bg-color;
width: 100vw;
height: 100vh;
color: $common-font-color;
display: flex;
overflow: hidden;
}
jsx:
<div className="main-window-wrapper" >
<window/>
<window />
<window />
</div>
scss:
.main-window-wrapper {
display: flex;
}
.window {
padding: 2vw;
overflow: scroll;
min-height: 100vh;
}