<p dir="auto">If I take away the minWidth from a select control, I expect the width to adjust to the currently selected option. This works perfectly on Chrome on my Mac. However it shows truncated text with ellipses on Safari as well as on mobile browsers.</p>
<ul class="contains-task-list">
<li class="task-list-item"><input type="checkbox" id="" disabled="" class="task-list-item-checkbox" checked=""> I have searched the <a href="https://github.com/callemall/material-ui/issues">issues</a> of this repository and believe that this is not a duplicate.</li>
</ul>
<h2 dir="auto">Expected Behavior</h2>
<p dir="auto">Here's the expected behavior which is what I get on Chrome. This is after removing <code class="notranslate">minWidth: 120</code> from the Select example:</p>
<p dir="auto"><a target="_blank" rel="noopener noreferrer nofollow" href="https://user-images.githubusercontent.com/1220198/32149549-84e256ba-bcdc-11e7-8e5a-cba7ab3f9da7.png"><img src="https://user-images.githubusercontent.com/1220198/32149549-84e256ba-bcdc-11e7-8e5a-cba7ab3f9da7.png" alt="image" style="max-width: 100%;"></a></p>
<h2 dir="auto">Current Behavior</h2>
<p dir="auto">Here's the current behavior in Safari and several mobile browsers:</p>
<p dir="auto"><a target="_blank" rel="noopener noreferrer nofollow" href="https://user-images.githubusercontent.com/1220198/32149507-fecf48da-bcdb-11e7-99f5-fa295974dc3b.png"><img src="https://user-images.githubusercontent.com/1220198/32149507-fecf48da-bcdb-11e7-99f5-fa295974dc3b.png" alt="image" style="max-width: 100%;"></a></p>
<h2 dir="auto">Steps to Reproduce (for bugs)</h2>
<p dir="auto">In the <a href="https://github.com/callemall/material-ui/blob/v1-beta/docs/src/pages/demos/selects/SimpleSelect.js">SimpleSelect</a> example, remove minWidth:</p>
<div class="snippet-clipboard-content notranslate position-relative overflow-auto" data-snippet-clipboard-copy-content="  formControl: {
    margin: theme.spacing.unit,
    // minWidth: 120,
  },"><pre class="notranslate"><code class="notranslate">  formControl: {
    margin: theme.spacing.unit,
    // minWidth: 120,
  },
</code></pre></div>
<p dir="auto">Change some of the options to be super long to exaggerate the problem:</p>
<div class="snippet-clipboard-content notranslate position-relative overflow-auto" data-snippet-clipboard-copy-content="&lt;MenuItem value={10}&gt;Ten&lt;/MenuItem&gt;
&lt;MenuItem value={20}&gt;Twenty&lt;/MenuItem&gt;
&lt;MenuItem value={30}&gt;Three Hundred and twenty&lt;/MenuItem&gt;"><pre class="notranslate"><code class="notranslate">&lt;MenuItem value={10}&gt;Ten&lt;/MenuItem&gt;
&lt;MenuItem value={20}&gt;Twenty&lt;/MenuItem&gt;
&lt;MenuItem value={30}&gt;Three Hundred and twenty&lt;/MenuItem&gt;
</code></pre></div>
<h2 dir="auto">Context</h2>
<p dir="auto">I am trying to pack 3 select controls in a mobile app horizontally. Having them autosize makes the best use of space and shows all the selected options without ellipses. If I have to specify minWidths, it will not make the best use of the available space.</p>
<h2 dir="auto">Your Environment</h2>

<table role="table">
<thead>
<tr>
<th>Tech</th>
<th>Version</th>
</tr>
</thead>
<tbody>
<tr>
<td>Material-UI</td>
<td>v1.0.0-beta.18</td>
</tr>
<tr>
<td>React</td>
<td>16.0.0</td>
</tr>
<tr>
<td>browser</td>
<td>Chrome and Safari on Mac + Mobile</td>
</tr>
<tr>
<td>etc</td>
<td></td>
</tr>
</tbody>
</table>
<ul class="contains-task-list">
<li class="task-list-item"><input type="checkbox" id="" disabled="" class="task-list-item-checkbox" checked=""> I have searched the <a href="https://github.com/mui-org/material-ui/issues">issues</a> of this repository and believe that this is not a duplicate.</li>
</ul>
<h2 dir="auto">Expected Behavior</h2>

<p dir="auto">Using <code class="notranslate">create-react-app-with-typescript</code> should work when I attempt to install it</p>
<h2 dir="auto">Current Behavior</h2>

<p dir="auto">I've tried to install <code class="notranslate">create-react-app-with-typescript</code> about a dozen different ways, and every single time I try to run it, I get the error:</p>
<div class="snippet-clipboard-content notranslate position-relative overflow-auto" data-snippet-clipboard-copy-content="(project_dir)/node_modules/material-ui/styles/MuiThemeProvider.d.ts
(8,10): Type 'StyleSheet' is not generic."><pre class="notranslate"><code class="notranslate">(project_dir)/node_modules/material-ui/styles/MuiThemeProvider.d.ts
(8,10): Type 'StyleSheet' is not generic.
</code></pre></div>
<h2 dir="auto">Steps to Reproduce (for bugs)</h2>

<ol dir="auto">
<li>Download <code class="notranslate">create-react-app-with-typescript</code></li>
<li><code class="notranslate">npm install --save</code></li>
<li><code class="notranslate">yarn start</code></li>
</ol>
<h2 dir="auto">Context</h2>

<p dir="auto">So far, I've been trying to install this so I can build a web frontend, and it's not worked at all.</p>
<h2 dir="auto">Your Environment</h2>

<p dir="auto">Mac OS, using brew to install. All settings identical to those in <code class="notranslate">create-react-app-with-typescript</code>. Using Google Chrome with the Fish terminal, but I'm fairly certain neither of those affect the issue.</p>