<h3 dir="auto">Problem description</h3>
<p dir="auto">display:flex is an object, instead of a string. Which breaks the flow of the UI. Any idea why? In the example of the documentation flex is a string.</p>
<p dir="auto"><a target="_blank" rel="noopener noreferrer nofollow" href="https://cloud.githubusercontent.com/assets/273479/15775698/a6eeb0fc-2983-11e6-9ff1-c259f73e4144.png"><img src="https://cloud.githubusercontent.com/assets/273479/15775698/a6eeb0fc-2983-11e6-9ff1-c259f73e4144.png" alt="display_not_string" style="max-width: 100%;"></a></p>
<h3 dir="auto">Versions</h3>
<ul dir="auto">
<li>Material-UI: 0.15.0</li>
<li>React: 15.0.1</li>
<li>Browser: Chromium 50.0</li>
</ul>
<h3 dir="auto">Problem description</h3>
<p dir="auto">I'm trying out Badge component and run into an 'invalid property value' error for CSS for Badge's display property when userAgent is 'all'</p>
<p dir="auto">cause : when userAgent is set to 'all', Material UI transforms <code class="notranslate">display:flex</code> into <code class="notranslate">display:-webkit-box,-moz-box,-ms-flexbox,-webkit-flex,flex</code></p>
<h3 dir="auto">Steps to reproduce</h3>
<p dir="auto">(1) set userAgent property in muiTheme<br>
<code class="notranslate">userAgent: 'all'</code><br>
(2) add a Badge compponent to your site</p>
<div class="highlight highlight-source-js notranslate position-relative overflow-auto" dir="auto" data-snippet-clipboard-copy-content="    &lt;Badge badgeContent={4} primary={true} style={{paddingTop:5}} badgeStyle={{top: 0, right: 15}}&gt;
        &lt;IconButton tooltip=&quot;checkout&quot;&gt;
            &lt;FontIcon className=&quot;material-icons&quot; color={grey500}&gt;shopping_cart&lt;/FontIcon&gt;
        &lt;/IconButton&gt;
    &lt;/Badge&gt;"><pre class="notranslate">    <span class="pl-c1">&lt;</span><span class="pl-ent">Badge</span> <span class="pl-c1">badgeContent</span><span class="pl-c1">=</span><span class="pl-kos">{</span><span class="pl-c1">4</span><span class="pl-kos">}</span> <span class="pl-c1">primary</span><span class="pl-c1">=</span><span class="pl-kos">{</span><span class="pl-c1">true</span><span class="pl-kos">}</span> <span class="pl-c1">style</span><span class="pl-c1">=</span><span class="pl-kos">{</span><span class="pl-kos">{</span><span class="pl-c1">paddingTop</span>:<span class="pl-c1">5</span><span class="pl-kos">}</span><span class="pl-kos">}</span> <span class="pl-c1">badgeStyle</span><span class="pl-c1">=</span><span class="pl-kos">{</span><span class="pl-kos">{</span><span class="pl-c1">top</span>: <span class="pl-c1">0</span><span class="pl-kos">,</span> <span class="pl-c1">right</span>: <span class="pl-c1">15</span><span class="pl-kos">}</span><span class="pl-kos">}</span><span class="pl-c1">&gt;</span>
        <span class="pl-c1">&lt;</span><span class="pl-ent">IconButton</span> <span class="pl-c1">tooltip</span><span class="pl-c1">=</span><span class="pl-s">"checkout"</span><span class="pl-c1">&gt;</span>
            <span class="pl-c1">&lt;</span><span class="pl-ent">FontIcon</span> <span class="pl-c1">className</span><span class="pl-c1">=</span><span class="pl-s">"material-icons"</span> <span class="pl-c1">color</span><span class="pl-c1">=</span><span class="pl-kos">{</span><span class="pl-s1">grey500</span><span class="pl-kos">}</span><span class="pl-c1">&gt;</span>shopping_cart<span class="pl-c1">&lt;</span><span class="pl-c1">/</span><span class="pl-ent">FontIcon</span><span class="pl-c1">&gt;</span>
        <span class="pl-c1">&lt;</span><span class="pl-c1">/</span><span class="pl-ent">IconButton</span><span class="pl-c1">&gt;</span>
    <span class="pl-c1">&lt;</span><span class="pl-c1">/</span><span class="pl-ent">Badge</span><span class="pl-c1">&gt;</span></pre></div>
<h3 dir="auto">Versions</h3>
<ul dir="auto">
<li>Material-UI: 0.15.4</li>
<li>React: 15.3.1</li>
<li>Browser: Chrome Version 52.0.2743.116 m</li>
</ul>