Хром не отображает divs правильно при использовании Flexie, (IE работает отлично)

Question

Я пытаюсь иметь 3 divs бок о бок, при этом все оставшиеся divs попадают в следующую строку. Следующее jsFiddle отлично работает в IE, но в Chrome он показывает только родительский div (box-wrap). See demo here.

Однако, если я удалю «float: left;» из # box-wrap-inner div, тогда появятся divs, но 4-й div находится за пределами родителя (справа). Он должен отображаться под div 1. See demo 2 here.

В IE однако 4-й div правильно расположен под div 1, как вы можете видеть на скриншоте ниже. Что заставляет Chrome не отображать divs правильно, когда «float: left;» добавлен?

Основной HTML-код:

<div id="box-wrap"> 
      <div id="box-wrap-inner"> 
       <div id="box-1">Box 1</div> 
       <div id="box-2">Box 2</div> 
       <div id="box-3">Box 4</div> 
       <div id="box-3">Box 3</div> 
      </div> 
</div> 

и CSS, что вызывает проблемы является:

#box-wrap-inner div { 
    float:left; 
    margin: 10px; 
    width: 32%; 
    height: 200px; 
    background: #f8f8f8; 
    border: 1px solid #8ec1da; 
    text-align: center; 
    line-height: 50px; 
} 

Любая помощь будет так здорово! Спасибо

работает должным образом в IE

Answer 1

Это потому, что вы используете:

#box-wrap-inner { 
    /* Display Box */ 
    display: -moz-box; 
    display: -webkit-box; 
    display: -ms-box; 
    display: box; 
} 

Просто удалите выше display: -webkit-box; и это работа в хроме:

Проверить JSFiddle Здесь.