title: Element width varies in chrome and in Internet Explorer
body: <p>I have the below code,</p>
  
  <pre class="lang-html prettyprint-override"><code>&lt;div class="Wrapper" style="width: 100%; height: 20%; justify-content: space-between;"&gt;
      &lt;div class="customText" style="width: auto; font-size: 33px; float: left; min-width: 10%;"&gt;Test&lt;/div&gt;
      &lt;div class="valueContainer" style="height: 100%; max-width: 90%;"&gt;
          &lt;div class="value" id="containercardElementCard1_ActValue" style="width: auto; color: rgb(104, 98, 98); line-height: 55px; font-size: 33px; max-width: 100%;" data-tooltip="Value: "&gt;7,632,789,549&lt;/div&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>Here the wrapper width is <code>247px</code>. </p>
  
  <p>In chrome, <code>customText</code> div takes <code>38.5px</code> width and <code>valueContainer</code> takes <code>208.4px</code>
  whereas in IE, <code>customText</code> takes <code>60.3px</code> and <code>valueContainer</code> takes <code>186.6px</code></p>
  
  <p>I suspect that the <code>max-width</code> property is not working in IE.</p>