css resize：在flex中调整大小时的奇怪行为

Question

我正在尝试使Flex容器中的两个子控件可调整大小，但是在拖动以调整大小时，光标不会停留在手柄上。 我认为最好试一下代码以了解我的意思。但是在IE / Edge中无法使用。

问题：是否有任何方法可以解决此问题，也就是在没有JavaScript的情况下使盒装可调整大小？ 额外的问题：有没有办法使上框从content-size开始，但最大（例如）为150px？当我添加flex-basis时，这些框根本无法调整大小。

div {
  background-color:red;
  border:1px solid black;
  display:flex;
  flex-direction:column;
  height:300px;
  margin:15px 5px;
  overflow-y:auto;
  padding:5px;
  resize:vertical;
}
span {
  background-color:green;
  border:1px solid black;
  display:block;
  flex-grow:1;
  margin:5px;
  min-height:80px;
  overflow-y: auto;
  resize:vertical;
}

<div>
  <span>
    A<br/>
    A<br/>
    A<br/>
    A<br/>
    A<br/>
    A<br/>
    A<br/>
    A<br/>
    A<br/>
    A<br/>
    A<br/>
  </span>
  <span>
    B<br/>
    B<br/>
    B<br/>
    B<br/>
    B<br/>
    B<br/>
    B<br/>
    B<br/>
    B<br/>
    B<br/>
    B<br/>
    B<br/>
    B<br/>
  </span>
</div>