How to fit resizable child div to his parent

Question

I try to combine draggable, resizable, droppable jquery functions & the flex css3 property.

I'm almost done but i have a problem with the resizable div. My code is made like this:

<div class="flex-container">
   <div class="flex-item"> <!---- droppable & draggable --->
      <div class="resize"> 
      </div>
   </div>
</div>

But when i resize my div, there is a blank space between the child right border & the parent right border and i don't want it.

I only have this problem when i use the display:flex property on the flex container.

Here is a fiddle of the problem:

http://jsfiddle.net/xRRdX/

(i need to use this weird resizable child div configuration because of this: jQuery UI draggable & position relative, change to absolute on resize )

I'm new here, thx for help!

Answer 1

wrong!

can not be self because this inside a parent div and not sure what size will

.flex-item {
    -moz-flex: 1 0 auto;
    -webkit-flex: 1 0 auto;
    flex: 1 0 auto;
}

now inherited from his father

-webkit-flex: 1 0 inherit;

The inherit keyword specifies that a property should inherit its value from its parent element.

.ui-resizable{
    min-width: 100px;
    min-height: 100px;
}

the absolute position has to be that way, otherwise I would not be superimposed

The position property specifies the type of positioning method used for an element (static, relative, absolute or fixed).