2

I got flexbox working in Firefox, but in webkit browsers the display:box div loses background.
Here is the online test:
http://www.angeloalpaca.railsperu.com/html/

Here is a simple example, see that the background disappears in the floated flexbox div(webkit):
http://www.angeloalpaca.railsperu.com/html/simple.html

The 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>


STYLES

#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}
Torsten Walter
  • 5,614
  • 23
  • 26
Ricardo Castañeda
  • 5,746
  • 6
  • 28
  • 41

1 Answers1

0

I'm looking at it in Chrome, and there seems to be a problem when giving a flexbox a float attribute. The grid class from 960 grid includes a float: left.

When the grid class is removed they have the same behavior.

bohawi
  • 61
  • 4