divネストdivオーバーフロー時改行

<style>
.nobreak 
{
  word-wrap: break-word; word-break: normal; width:400px;
}
</style>
<div class="nobreak" >
  <div style="float:left;margin:1;padding:0;width:100px;background-color:red;">1</div>
  <div style="float:left;margin:1;padding:0;width:100px;background-color:blue;">2</div>
  <div style="float:left;margin:1;padding:0;width:100px;background-color:green;">3</div>
  <div style="float:left;margin:1;padding:0;width:100px;background-color:black;">4</div>
  <div style="float:left;margin:1;padding:0;width:100px;background-color:yellow;">5</div>
  <div style="float:left;margin:1;padding:0;width:100px;background-color:#2FF8FF;">6</div>
</div>

以下の方法も使用できますが、itemの幅と高さを設定することはできません.

<style>
.nobreak 
{
  word-wrap: break-word; word-break: normal; width:400px;
}
</style>
<div class="nobreak" >
  <div style="display:inline;width:100px;background-color:red;">1</div>
  <div style="display:inline;width:100px;background-color:blue;">2</div>
  <div style="display:inline;width:100px;background-color:green;">3</div>
  <div style="display:inline;width:100px;background-color:black;">4</div>
  <div style="display:inline;width:100px;background-color:yellow;">5</div>
  <div style="display:inline;width:100px;background-color:#2FF8FF;">6</div>
</div>