Html 填充父对象剩余宽度的浮动div

如果还有至少50px，我如何让foo填充容器宽度的剩余部分。如果foo>50px，它将移动到一条增加容器高度的新行。这个问题是一样的。我不相信没有javascript就不能做到这一点。来吧，兄弟

.container {
  width: 300px;
  min-height: 30px;
  overflow: auto;
}
.child {
  float: left
}
.foo {
  /* ? */
}

---

当您知道其他CSS的宽度时，可以使用CSS黑客。或者你可以用一张桌子。但是CSS中没有诸如“width:100%-otherelement.width”这样的概念，这只在JavaScript中有效。

请查看此内容

它正在工作

HTML代码：

<div class="container"> <div class="child">First</div> <div class="foo">Second</div> </div> 

---

我为你摆弄了一些东西：

.foo div有一个

minwidth

，以确保它将转到下一行，因为可用的内存少于50px。

溢出：隐藏确保div不在.child div后面

我添加了一些JavaScript来演示.child变宽时的行为。单击.child div向其宽度添加一些像素。当.child div占用的空间太大，剩下的空间不足50px时，.foo div将跳转到下一行

纯CSS，但仅在Safari中测试。：）
 谁否决了我！？来吧，兄弟！如果剩余大于等于50px，您希望foo填充容器。没有时会发生什么，转到下一行？顺便说一句，这不可能只是CSS。CSS不执行if语句。这不是您想要的，从.child div中删除背景色，您会看到.foo div实际上位于.child div后面。现在检查一下，但您将无法获得100%的.foo div宽度，这实际上不起作用。如果使第二个div变长，它将环绕第一个div，而不是向右浮动：
first second​
.container {
  width: 300px;

  overflow: auto;
    background:#ff00dd;
}
.child {
  float: left;
    background:#ff0;
}
.foo {
  background:#0033dd;
}