CSS3 Flexbox - 在Safari中使用960grid失败

Question

我在Firefox中使用了flexbox，但在webkit浏览器中，display：box div失去了背景 这是在线测试：
http://www.angeloalpaca.railsperu.com/html/

这是一个简单的例子，看到背景在浮动的flexbox div（webkit）中消失了：
http://www.angeloalpaca.railsperu.com/html/simple.html

HTML：

<div id="main-wrapper" class="container_12">
  <div id="main">
    <div id="sidebar-first" class="grid_3">

    </div>
    <div id="content" class="grid_8">


    </div>
  </div>
</div>

样式

#main{
  display: -webkit-box;
  -webkit-box-orient: vertical;

  display: -moz-box;
  box-orient: vertical;

  display: box;
  box-orient: vertical} 

#main #sidebar-first{
  padding-top:170px; background:#1a8099; 
  -webkit-box-flex: 1;
  -moz-box-flex: 1;
  box-flex: 1}

#content{
  min-height:800px; background:red }

STYLES 960 grid

body{min-width:960px}.container_12{margin-left:auto;margin-right:auto;width:960px}.grid_3,.grid_8{display:inline;float:left;margin-left:10px;margin-right:10px}

Answer 1

我在Chrome中看到它，并且在给flexbox一个float属性时似乎存在问题。来自960网格的网格类包括 float：left 。

删除网格类时，它们具有相同的行为。