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。