图像应填充右浮动div左侧的宽度

Question

我有一个带浮动的页面：右侧嵌入容器中的div。 float：right div占据一个恒定的宽度，但它的高度是可变的。在float：right div。

之外的容器中可以有各种各样的html元素

这里有一个描述可比情景的方法，其中容器内的图像足够宽，它被推到浮动下方：右边div（我试图避免的东西）： https://jsfiddle.net/a13ym4eo/3/

#container {
    float: left;
    width: 500px;
    margin: 5px;
    padding: 5px;
    border: 1px solid black;
}
#floated {
    float: right;
    height: 100px;
    width: 100px;
    background: red;
}

#container img {
  float:left;
  max-width: 100%;
}

当容器内部有一个图像元素时，在float：right div之外，我希望渲染图像元素的宽度为容器div的宽度减去浮动的宽度：右div（即浮点数：右侧div，以及它们之外的内容，并排，在它们的垂直坐标重叠的情况下）。如果内容的最高点低于浮动的底部：右侧div，则内容应填充容器宽度的100％。我该如何在CSS中执行此操作？