如何将可调整大小的子div与其父级相匹配

Question

我尝试组合可拖动，可调整大小，可放置的jquery函数和＆amp; 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 draggable & position relative, change to absolute on resize）

我是新来的，请求帮助！

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;
}

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

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