当父容器具有其他内容时，孩子的最大身高不能达到100％

Question

我想做的是有一个具有2个子div的父div，并且仅使其中一个子的max-height与父div的高度相等。因此，如果父级的高度为200px，child1的高度为50px，我希望child2的最大高度为150px。 child1的高度不是固定的，可以在调整窗口大小的同时进行更改（因此，如果它变为20px，我希望child2的max-hight为180px）。

#parent {
  height: 200px;
}
#child1 {
  padding: 10px;
}
#child2 {
  padding: 10px;
  max-height: 100%;
  overflow-y: scroll;  
}

<div id="parent">
  <div id="child1">
      
  </div>
  <div id="child2">
  
  </div>
</div>

我可以使用jQuery使其工作，但是可以仅使用CSS或sass吗？ 工作示例：https://jsfiddle.net/hs3zg5fL/4/