Need to put a scrollable Div inside a container with relative position and scrollable should not aff-CodePudding

Above you can see. I have two divs. one is fixed and second is scrollable. The right sided div can be expanded and collapsed and the second div will adjust its width accordingly.

Now I want to place a div whose size and positioning should be not affected by the right side div's state ( either open or closed ) and I want to make it scrollable. Adding position absolute add scrolls to whole page and the fixed Div on right is not of 100% height anymore. Can someone draw a basic code structure using flexbox on how to create such flow.

Thanks

CodePudding user response：

Try this css code :D

body {
    position: relative;
}

header {
    position: fixed;
    height: header height; // put header height
    top: 0;
}

fixedLeftDiv {
    position: fixed;
    top: header height;
    left: 0;
}

scrollableDiv {
    position: fixed or absolute; // choose what you need
    top: header height; 
    left: fixedLeftDiv width;
}

CodePudding user response：

There are plenty of way to do that, but lets propose one that mix positionning (for the header) and usage of flex box (for the side panel and the main area)

First a basic html structure

<div class='app'>
  <div class='app-header'>header content</div>
  <div class='app-content'>
    <div class='side-panel'>panel content</div>
    <div class='main-area'>area content</div>
  </div>
<div class='app>

then some less/css

.app {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  background: pink;
  display: flex;
  flex-direction: column;
}
.app-header {
  background: yellow;
}
.app-content {
  flex-grow: 1;
  overflow: hidden;
  display: flex;
  background: red;
 }
.side-panel {
  height: 100%;
  flex-grow: 0;
  flex-shrink: 0;
  background: blue;
}
.main-area {
  min-height: 100%;
  flex-grow: 1;
  flex-shrink: 1;
  overflow: auto;
  background: green;
}

see it on JSFiddle here : https://jsfiddle.net/70qxu4L3/