When I try to use inline styles flex attribute it's changed. This:
<div style={{ flex: '1' }}></div>
becomes
<div style="flex: 1 0 0px;"></div>
I can't figure out where the heck it comes from.
Or is it a core React bug?
Add a comment
|
1 Answer
(Edited) Explaination is that React is trying to be clever and follow the standards but IE11 isn't following it or just too buggy in it's implementation of flexbox.
class Hello extends React.Component {
render() {
return (
<div style={{ display: 'flex', textAlign: 'center' }}>
<div style={{ flex: '1 0 auto', border: '1px dotted #ccc' }}>
Hello
</div>
<div style={{ flex: '1 0 auto' }}>
or
</div>
<div style={{ flex: '1 0 auto', border: '1px dotted #ccc' }}>
world
</div>
</div>
);
}
}
ReactDOM.render(
<Hello />,
document.getElementById('container')
);
https://jsfiddle.net/69z2wepo/313712/ (ironically jsfiddle doesn't support IE11)
Only workaround I've found is to add the flex: 1; in a stylesheet loaded by react.
Created an issue on their github also: https://github.com/facebook/react/issues/13859