title: Using rem units in media queries and as width
body: <p>When using rem units in Google Chrome (or firefox), the result is unexpected. I'v set up a page with the root font-size set to 10px to make it easier the translate a pixel based design to html/css. </p>
  
  <p>This is my css. My expectation would be a page with one 500px wide box and if the screen is wider than 500px the background should turn red.</p>
  
  <pre><code>html {
  font-size: 10px;
  }
  
  @media screen and (min-width: 50rem){
    body{
      background-color: red;
    }
  }
  
  .test{
    width: 50rem;
    background: black;
    height:100px;
  }
  </code></pre>
  
  <p>But, despite both values being defined as 50rem, the results is a 500px wide box with the page turning red at 800px.</p>
  
  <p><a href="https://jsfiddle.net/tstruyf/puqpwpfj/4/" rel="noreferrer">https://jsfiddle.net/tstruyf/puqpwpfj/4/</a></p>
  
  <p>What am I doing wrong or why is this?</p>