jQuery UI，以响应方式调整最后一个div的大小

Question

如何使最后一个div总是向左拖动以填充结尾，通过向右推动将其减小以减小其大小，并且当更改第一个div的大小并不影响最后一个div时，仅影响第一个和第二个div ？
在下面的代码中，div超出了底部caixa的大小。

codepen.io e.g.

$(".caixa").resizable({
   handles: "s", 
   minHeight: 50,
   maxHeight: 300
});
$(".ta").resizable({
   handles: "e",
});

.caixa {
  background-color: #444;
 /* margin: 100px auto; */
  height: 200px;
  width: 600px;
  overflow: hidden;
  padding-bottom:2px;
}
.ta {
  float: left;
  height: 100%;
  width: 33%;
  padding-right:2px;
}
.ta1 {
  background-color: #000;
}
.ta2 {
  background-color: #ddd;
}
.ta3 {
  background-color: #888;
}
textarea {
  resize:none;
  width: 100%;
  height: 100%;
  padding: 0;
  margin: 0;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/themes/smoothness/jquery-ui.css">
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>

<div class="caixa">
   <div class="ta ta1"><textarea></textarea></div>
   <div class="ta ta2"><textarea></textarea></div>
   <div class="ta ta3"><textarea></textarea></div>
</div>