Css 用内容宽度展开容器div

我的应用程序具有以下结构：

<div id="container">
  <div id="child_container">
    <div class="child"></div>
    <div class="child"></div>
    ...
    <div class="child"></div>
  </div>
</div>

如果我将child_container div width设置为一个固定值，我可以让它水平扩展到container div之外，尽管它有点难看，但仍然可以工作：

+------ container -------+
+------ child_container -+----+
| child1 child2 child3 child4 |
+------------------------+----+

但是，每当添加新的子项时，都需要重新计算它

+------ container -------+
+--- child_container ----+
| child1 child2 child3   |
| child4                 |
+------------------------+

有没有一种方法可以做到这一点，而不必为子容器使用固定的宽度，这样最终的结果是

+--------- container ---------+
+------ child_container ------+
| child1 child2 child3 child4 |
+-----------------------------+

---

谢谢。

如果您将所有剩余内容（包括包含的div）都浮起，它将工作。

类似的操作应该可以工作：

#container, #child_container, .child { 
    position: relative; 
    float: left;
}

更简单的是：

<style>
    #container{ display: inline-block; }
</style>

#容器{显示：内联块；}

只需将父容器的宽度设置为120%并完成=）

添加子元素时，父容器不会增长

+------ container -------+
+--- child_container ----+
| child1 child2 child3   |
| child4                 |
+------------------------+

但是我们可以通过使用css3 flex box避免在下一行渲染新的。样品放置在下述位置

结果如下所示：

+--- child_container ----+|
| child1 child2 child3  ch|ild4 child5  
|                         |
+------------------------+

---

今天的现代解决方案是

#child_container {
    display: flex;
}

因为

flex wrap

默认设置为

flex-wrap: nowrap;

---

这个简单的解决方案很有魅力。到目前为止，所有相关的浏览器中都有。

请提供一些代码。在小提琴中甚至更好。这里是：我认为，它更好地说明了上述ascii艺术的等价物。刚刚添加了宽度：100%到#容器。@thirtydot，因为一些浏览器呈现html的方式。在不告诉它位置的情况下，一些浏览器不会使用“子”元素的大小来增加容器的大小，这很好。。。尽管您可能不需要

位置：relative@wajiw:哪些浏览器？我想你说的是一些非常古老的浏览器。@thirtydot是的，这更像是我使用IE6/7=）现在没有那么重要了，但这是容器的一个很好的实践。你能看一下吗？在这个例子中，它似乎不起作用，即使所有的东西都有“float:left；”。很容易处理，这将允许更多的元素，那么更多的东西进入呢？但是容器的宽度不会增加，是吗？
flex-wrap: nowrap;