Flexbox在Chrome和Firefox中的不同行为

Question

I am trying to build a web page with dynamic layout using Flexbox and React. When flex-direction is toggled from column to row and back to column, width of flex items is not reflecting as expected in chrome.

I created a jsfiddle to explain this problem

http://jsfiddle.net/kirana/u44fjqdj/4/ (Reactjs Version)

http://jsfiddle.net/kirana/vm9jcr1t/2/ (Jquery version)

In the above jsfiddle example, Flex container has a width of 400px and the four child flex items has a width of 400px flowing from top to bottom. When flex-direction is changed to row, child items width is reduced to 100px to fit in the row. When the flex-direction is changed back to column, child items width should revert back to 400px, but width is remaining at 100px in Chrome and it is working as expected in firefox;

How to get around this problem ?

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

Seems like this isn't an issue with React nor jQuery at all. You appear to be hitting a bug in Chrome. You should make sure it's not present in Canary and find/file on https://code.google.com/p/chromium/issues/list .