Dividing the viewport height over two divs with an adjustable border

Question

I would like to have the viewport height divided into two divs, with the border adjustable. I thought I could accomplish this by using flex (to make the elements fill their container) and setting resize: vertical and overflow: auto on the top element (to make it resizable). I would then expect the bottom element to resize accordingly due to flex.

But I cannot seem to get it right. This snippet shows the idea, but when resizing the top element, the border does not move along with the cursor. (I tested that in Firefox 52 and Chromium 69 on Debian Stretch.)

I am aware of solutions using JavaScript, but I'm looking for a CSS-only solution. Is that possible? I'm not bound to using flex or resizable.

body {
  margin: 0;
}

#container {
  display: flex;
  flex-flow: column;
  height: 100vh;
}

#A {
  background: red;
  flex: 1 1 auto;
  overflow: auto;
  resize: vertical;
}

#B {
  background: blue;
  flex: 1 1 auto;
  overflow: auto;
}

<div id="container">
  <div id="A">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</div>
  <div id="B">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</div>
</div>

Answer 1

You need to disable the shrink for the first element. I think while changing the size of the element you change to a new height and after that the flexbox is applying his shrink effect to calculate another height since both element have their size bigger than the container and the negative free space need to be split equally. That's why the cursor is moving to the bottom (element shrinking)

body {
  margin: 0;
}

#container {
  display: flex;
  flex-flow: column;
  height: 100vh;
}

#A {
  background: red;
  flex-shrink:0;
  height:50%;
  overflow: auto;
  resize: vertical;
}

#B {
  background: blue;
  flex-grow:1;
  overflow: auto;
}

<div id="container">
  <div id="A">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</div>
  <div id="B">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</div>
</div>

If you try another example where we don't have negative free space you won't have issue and it will work without flex-shrink:0 as flexbox won't calculate a new height.

body {
  margin: 0;
}

#container {
  display: flex;
  flex-flow: column;
  height: 100vh;
}

#A {
  background: red;
  overflow: auto;
  resize: vertical;
}

#B {
  background: blue;
  flex-grow:1;
  overflow: auto;
}

<div id="container">
  <div id="A">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud </div>
  <div id="B">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat </div>
</div>

And in this case (when the content is smaller and we have positive free space) we need to also disable the flex-grow (i.e. avoid setting flex-grow) because we will have a similar effect as with flex-shrink. The flexbox will try to calculate a new height to make the element growing in order to split the free space equaly. In this case, the cursor is moving to the top (element growing)

body {
  margin: 0;
}

#container {
  display: flex;
  flex-flow: column;
  height: 100vh;
}

#A {
  background: red;
  overflow: auto;
  flex-grow:1; /*not good*/
  resize: vertical;
}

#B {
  background: blue;
  flex-grow:1;
  overflow: auto;
}

<div id="container">
  <div id="A">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud </div>
  <div id="B">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat </div>
</div>