javascript - 幅のサイズを変更すると、jQuery UI のサイズ変更可能な高さが変更されます

Question

サイズを変更して水平方向にドラッグしようとしている非常に単純な DIV 要素があります。正常に動作しますが、DIV 要素の高さも jQuery UI によって変更されます。理由がわかりません。

誰でもアイデアはありますか？

JS コード:

$('.タスク')
    .ドラッグ可能({
        軸: 'x'
    }))
    .サイズ変更可能({
        封じ込め：「親」、
        ハンドル: 'e, w'
    });

HTML コード:

<ul>
  <リ>
    <div class="タスクステータス-グリーン">
      <span class="handle-move"></span>
    </div>
  </li>
</ul>

CSS コード:

李{
  高さ: 20px;
  行の高さ: 20px;
  リストスタイル: なし;
}

。仕事 {
  高さ: 16px;
  マージントップ: 2px;
  位置: 相対;
}

.タスクスパン{
  表示ブロック;
  高さ: 16px;
  位置: 絶対;
  Z インデックス: 10;
}

.task .handle-move {
  下: 0;
  カーソル: 移動;
  左: 10px;
  右: 10px;
  上: 0;
  z-index:1;
}

.task .ui-resizable-handle {
  背景色: ピンク;
  カーソル: e-サイズ変更;
  高さ: 16px;
  位置: 絶対;
  幅: 10px;
}

.task .ui-resizable-w {
  左: 0;
}

.task .ui-resizable-e {
  右: 0;
}

.ステータスグリーン{
  背景色: 緑;
}