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

我有一个带有float的页面：right div嵌入在一个容器中。float:right div占用恒定的宽度，但其高度是可变的。容器中可以有任何种类的html元素，在float:right div之外

这里有一个jsfiddle描述了一个类似的场景，其中容器中的一个图像足够宽，它被推到float:right div下面（这是我试图避免的）：

---

当容器内部、float:right div外部有一个图像元素时，我希望渲染图像元素的宽度是容器div的宽度减去float:right div的宽度（即，在垂直坐标重叠的情况下，使float:right div与容器外部的内容并排）。当有内容的最高点低于float:right div的底部时，内容应填满容器宽度的100%。我应该如何在CSS中执行此操作？

？可以使用calc（）吗？最大宽度：计算（100%-100px）；你的小提琴显示的图像被推到下面，就像我的一样。我希望图像和#并排浮动。@Boa[]看起来像这样？？好吧，好吧，问题是，在我看来，你希望一个或多个元素“知道”它相对于另一个元素的垂直位置，而这不能用CSS来完成，因为它没有这样的智能。。。但是脚本会这样做，所以您的问题的答案是，您不能单独使用CSS来完成这项工作？您可以使用calc（）吗？最大宽度：计算（100%-100px）；你的小提琴显示的图像被推到下面，就像我的一样。我希望图像和#并排浮动。@Boa[]看起来像这样？？好吧，好吧，问题是，在我看来，你希望一个或多个元素“知道”它相对于另一个元素的垂直位置，而这不能用CSS来完成，因为它没有这样的智能。。。但脚本确实如此，所以您的问题的答案是，您不能单独使用CSS来实现这一点

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