title: css min-width does not work properly
body: <p>I'm trying to position a div centered in another div with this code:</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false">
  <div class="snippet-code">
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div style="width:100%; height: 300px; background:red;"&gt;
    &lt;div style="margin:auto; min-width:50%; height:100%; background:green;"&gt;Text&lt;/div&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>It results in a big green div that's width is 100%. I expect it to be 50% though. Can somebody tell me why css wont give it 50% width and center it?</p>