Flexbox在Chrome和Firefox中的不同行为

Question

我正在尝试使用Flexbox和React构建带动态布局的网页。 当flex-direction从列切换到列并切换回列时，flex项目的宽度在chrome中未按预期反映。

我创建一个的jsfiddle解释这个问题

http://jsfiddle.net/kirana/u44fjqdj/4/（Reactjs版）

http://jsfiddle.net/kirana/vm9jcr1t/2/（Jquery的版本）

在上述的jsfiddle例如，柔性容器具有的400像素和四个宽度子弹性项目的宽度为400px，从上到下流动。 将弹性方向更改为行时，子项宽度将减少到100px以适合该行。 当弹性方向改回列时，子项目宽度应该恢复为400px，但Chrome中的宽度仍为100px，并且在Firefox中按预期工作;

如何解决这个问题？

var FlexItem = React.createClass({ 
    render: function() { 
     var itemStyle = { 
      width: 400, 
      height: 100, 
      border: '1px solid red', 
     }; 
     return React.DOM.div({ 
      style: itemStyle 
     }, 'some text'); 
    } 
}); 

var FlexContainer = React.createClass({ 
    getInitialState: function() { 
     return { 
      direction: 'column' 
     }; 
    }, 
    toggle: function() { 
     this.setState({ 
      direction: (this.state.direction === 'row') ? 'column' : 'row' 
     }); 
    }, 
    render: function() { 
     var containerStyle = { 
      display: '-moz-flex', 
      display: '-webkit-flex', 
      display: 'flex', 
      MozFlexDirection: this.state.direction, 
      WebkitFlexDirection: this.state.direction, 
      flexDirection: this.state.direction, 
      width: 400, 
      border: '1px solid green', 
     }; 

     var container = React.DOM.div({ 
      style: containerStyle 
     }, FlexItem(), FlexItem(), FlexItem(), FlexItem()); 

     var button = React.DOM.button({ 
      onClick: this.toggle, 
      className: 'button' 
     }, 'Toggle'); 

     return React.DOM.div({}, button, container); 
    } 
}); 

React.renderComponent(FlexContainer(), document.body); 

Answer 1

看起来像这样不是React或jQuery的问题。您似乎在Chrome中遇到了一个错误。你应该确保它不在加那利，并找到/文件https://code.google.com/p/chromium/issues/list。