JQuery UI resizes when changing width

Question

I have a very simple DIV element that I'm trying to resize and drag horizontally. It works fine, but the height of the DIV element is also changed using jQuery UI. I do not understand why.

Any idea?

JS Code:

  $ ('. task')
     .draggable ({
         axis: 'x'
     })
     .resizable ({
         containment: 'parent',
         handles: 'e, w'
     });

HTML code:

  <ul>
   <li>
     <div class = "task status-green">
       <span class = "handle-move"> </span>
     </div>
   </li>
 </ul>

CSS code:

  li {
   height: 20px;
   line-height: 20px;
   list-style: none;
 }

 .task {
   height: 16px;
   margin-top: 2px;
   position: relative;
 }

 .task span {
   display: block;
   height: 16px;
   position: absolute;
   z-index: 10;
 }

 .task .handle-move {
   bottom: 0;
   cursor: move;
   left: 10px;
   right: 10px;
   top: 0;
   z-index: 1;
 }

 .task .ui-resizable-handle {
   background-color: pink;
   cursor: e-resize;
   height: 16px;
   position: absolute;
   width: 10px;
 }

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

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

 .status-green {
   background-color: green;
 }

Answer 1

In my experience, the function of the resizable function is not trying to use the css-size property. Try using

box-sizing: border-box; 

or create an inner container to fill.