javascript - jQuery UI，响应式调整最后一个 div

Question

如何通过将最后一个 div 拉到左边来使最后一个 div 总是填充末尾，通过将它推到右边来减小它的大小，并且当更改第一个 div 的大小时不会影响最后一个 div 只影响第一个和第二个 div？
在下面的代码中，对于超过 的大小caixa，div 会移到底部。

codepen.io 例如

$(".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>

标签： javascriptjquerycss