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;
}