如何将可调整大小的儿童div适合其父母

Question

我尝试结合可拖动，可调整大小，可放置的jquery函数和flex css3属性。

我快完成了，但是可调整大小的div出现了问题。 我的代码是这样写的：

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

但是，当我调整div的大小时，孩子的右边框和父母的右边框之间有一个空白，我不想要它。

当我在flex容器上使用display：flex属性时，只有这个问题。

这是问题的一个小提琴：

http://jsfiddle.net/xRRdX/

（由于这个原因，我需要使用这个奇怪的可调整大小的子div配置： jQuery UI可拖动和相对位置，在调整大小时更改为绝对值 ）

我是新来的，需要帮助！

Answer 1

错误！

不能是自我的，因为这在父div内并且不确定大小会是多少

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

现在从他父亲那里继承下来

-webkit-flex: 1 0 inherit;

Inherit关键字指定属性应从其父元素继承其值。

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

绝对位置必须是这样，否则我不会被叠加

position属性指定用于元素的定位方法的类型（静态，相对，绝对或固定）。