title: Why can I not flexbox certain elements in ReactJS?
body: <p>I started out trying to style <code>&lt;Link&gt;</code> elements from <code>react-router</code>.</p>
  
  <pre><code>&lt;Link style={{display: 'flex'}}&gt;...&lt;/Link&gt;
  </code></pre>
  
  <p>but it seems like it strips the <code>display</code> CSS property specifically.
  Does anyone know why and how to fix it?</p>
  
  <p>I get the same problems with</p>
  
  <pre><code>&lt;a style={{display: 'flex', marginTop: '10px'}}&gt;Test link&lt;/a&gt;
  </code></pre>
  
  <p>(Result: Only <code>margin-top: 10px</code> is applied)</p>
  
  <p><strong>EDIT:</strong>
  For future reference, as I see this page still gets some views:</p>
  
  <p>I <em>really</em> tried using multiple vendor-specific <code>display</code> CSS attributes, and not just a single <code>flex</code> attribute value, so I realize now that the question is very vague...</p>
  
  <p>The problem is that the ReactJS team changed the way they parse CSS attributes in inline styles, and we "all" really relied on an undocumented (internal) code of ReactJS. So this used to work:</p>
  
  <pre><code>&lt;div style={{'display': ['flex', '-webkit-flex']}}&gt;
      ...
  &lt;/div&gt;
  </code></pre>
  
  <p>But this doesn't anymore, since they updated that part of the code.</p>
  
  <p>For further details see e.g. <a href="https://github.com/facebook/react/issues/2020" rel="nofollow noreferrer">https://github.com/facebook/react/issues/2020</a></p>