Why does Safari refuse to render a div with hidden overflow at full width in presence of floats?

Question

In the presence of some floats (red outline in demo), chrome and firefox will render the blue div at full width (blue outline in demo), but Safari's blue div will not stretch the whole width.

I found that removing margin-left or overflow:hidden from .center-pane somewhat fixes the issue in Safari, but these are desirable since they prevent content wrapping below the nav items.

Any thoughts as to how to get the "center content" to stretch the full width without explicitly specifying a percentage on Safari, or must I provide a width as well?

link to demo on JSBIN

link to image - chrome on top - safari on bottom (shows "bug")

The center pane looks like this:

.center-pane {
  margin-left: 150px;
  overflow: hidden;
  border: 1px solid #09F;
}

for the two left-nav items we have:

.left-nav {
  width: 150px;
  display: block;
  margin-left: 0;
  float: left;
  clear: left;
  box-sizing: border-box;
  border: 1px solid #F09
}

Safari 5.1.7

• edit - this may be a duplicate of Overflow:hidden messing with margins in Chrome and Safari