向左飘浮;在父母下面放下子div

Question

这有点复杂，是特定于Chrome的问题（jsFiddle for reference）。

我有一些html是一个容纳三个DIV的容器：

  
• 一个标题div（必须增长和缩小到容器的大小）
  
• 一个孩子＆＃34; div（总是在左上角，但在其他方面就像一个子div）
  
• 和一个＆＃34;儿童容器＆＃34;包含零对多子div的div（应该向左浮动，然后在第五项之后换行）

<div id="container">
    <div class="header">cool header</div>

    <div class="child">child 0</div>

    <div id="child_container">
        <div class="child">child 1</div>
        <div class="child">child 2</div>
        <div class="child">child 3</div>
    </div>
</div>

我遇到的问题是当有5个或更少的孩子时，＃34; div的。如果有more than 5 "child" divs，则所有格式都正确。如果有fewer than 5 "child" divs，那么最后一个＆＃34;孩子＆＃34;将永远出现在＆＃34;孩子0＆＃34; DIV。我需要的是＆＃34;孩子＆＃34;除非有超过五个孩子，否则div to to war to第二行。

我尝试了几种不同的方法（即不同的显示类型，浮动容器，不浮动所有孩子等），但无论我尝试什么，都可以使用＆＃34;标题＆＃34;班级没有正确的大小或孩子们没有正确包装。

连连呢？

Answer 1

Solved Check Demo

给min-width: attrib解决问题检查不同的换行号 它的容器宽度决定了当它包裹你当前给出的最大限制

编辑 ：即使Chrome中的chrome特定问题也可以通过提供min-width:来解决

Demo Which Shows the difference with and without min-width