cssで隣り合う２つの要素のサイズを可変にしてドラッグで調節できるようにしたい

Question

画像のように，縦に要素を２つ，親要素いっぱいになるように並べて，境界をドラッグすることで２つの高さを変えられるようにしたいです．
どのように書けばできますか．

[補足]
FlexBoxも試してみたのですが、resizeと組み合わせた際の挙動がいまいちよくわからないことになったので、結局javascriptでも制御することにしました。
以下yoshinaviさんのコードにjsを加えたものです。
ありがとうございました。
https://jsfiddle.net/kairi003/o14asjkx/17/

{
const a = document.querySelector('.inner-a');
const b = document.querySelector('.inner-b');
let flag = false;
a.addEventListener('mousedown', e=>{
	flag = true;
})
window.addEventListener('mousemove', e=>{
	if (flag) {
  	b.style.height = `calc(100% - ${a.style.height})`;	
  }
})
window.addEventListener('mouseup', e=>{
	flag = false;
})
}

Comments

[kei344]

https://teratail.com/help/question-tips

Answer 1

しらべてないから HTML 4.x の技術だけで

<frame>

部分要素？

<iframe> で上記タグを利用したファイルをよめばいいじゃない

Answer 2

既にベストアンサーを決定しているためこちらから質問本文の補足に移行しました。

Answer 3

カラムの幅を可変にするのは、flexboxあたりが大変便利ですが、質問のイメージとは少し違うようですね。
試していないので恐縮ですが、以下２つの合わせ技で実装できるのではと思います。

これからのCSSレイアウトはFlexboxで決まり！

CSSだけでボックスの縦横サイズをユーザが自由に変更できるようにする方法

ご参考になれば…

Answer 4

HTMLとCSSのみでは難しいかと･･･。一応、Chrome・Firefoxのみなら、以下の似たようなモノは可能です。

<div class="box">
  <div class="inner-a">inner-a</div>
  <div class="inner-b">inner-b</div>
</div>

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

.box {
  margin: 0 auto;
  width: 50vw;
  height: 100vh;
  overflow: hidden;
}

.inner-a {
  width: 100%;
  height: 50%;
  padding: 5%;
  overflow-y: scroll;
  background-color: lightsteelblue;
  resize: vertical;
}

.inner-b {
  width: 100%;
  height: 100%;
  padding: 5%;
  background-color: lightcoral;
  resize: vertical;  
}