如何使iframe适合浮动图像附近的宽度？

Question

当旁边有浮动元素时，如何使Iframe的宽度适合父元素的剩余宽度？

代码示例：https://jsfiddle.net/1r1o87c0/

<div id="parent">
<p>
Aenean id nisl elit. Phasellus<img class="alignright" src="http://placehold.it/200x200"> porta nunc vitae porta.
</p>
<div id="iframe_wrap"><iframe src="http://example.com/" scrolling="no" frameborder="no"></iframe></div>
<p>
Nullam eleifend est tempus felis dignissim luctus. eugiat pulvinar ac non mauris.
</p>
</div>

目前，iframe尺寸为300x150px，即defined by the CSS specs。 将iframe宽度设置为auto似乎不起作用，并将其设置为100％显然只是在浮动图像后将其按下。

我不介意使用JS ......