Media query being executed after it should
<p>I am working with <code>flex</code> items so I think it could be the problem of why my code is making a strange behaviour.</p>

<p>I have <code>.flexContainer</code> class that has a <code>max-width</code> property. After I resize the window, I want to change this <code>max-width</code> property to a higher value but if I set my media query as:</p>

<pre><code>@media screen and (max-width: 850px){
    .flexContainer{
       max-width: 60%; 
    }
}
</code></pre>

<p>the <code>max-width</code> of the element is changing at <code>835px</code> instead of <code>850px</code>.</p>

<p>Here is my code:</p>

<p><strong>HTML:</strong></p>

<pre><code>&lt;div id="container"&gt;
  &lt;div id="left" class="block"&gt;Left&lt;/div&gt;
  &lt;div id="center" class="block"&gt;
    &lt;div class="flexContainer"&gt;
      &lt;div class="flexDiv"&gt;&lt;/div&gt;
    &lt;/div&gt;
    &lt;div class="flexContainer"&gt;
      &lt;div class="flexDiv"&gt;&lt;/div&gt;
    &lt;/div&gt;
    &lt;div class="flexContainer"&gt;
      &lt;div class="flexDiv"&gt;&lt;/div&gt;
    &lt;/div&gt;
  &lt;/div&gt;
  &lt;div id="right" class="block"&gt;Right&lt;/div&gt;
&lt;/div&gt;
</code></pre>

<p><strong>CSS:</strong></p>

<pre><code>html, body{
    width: 100%;
    height: 100%;
}

#container{
    display: flex;
    height: 100%;
    background-color: blue;
}

.block{
    flex: 1;
}

#left{
    background-color: green;
}

#center{
    display: flex;
    flex: 1;
    flex-wrap: wrap;  
    align-content: flex-start;
}

#right{
    background-color: orange;
}

.flexContainer{
    flex: 1;
    min-width: 100px;
    max-width: 50%;
    box-sizing: border-box;
    height: 150px;
    background-color: red;
    padding: 10px;
}

.flexDiv{
    width: 100%;
    height: 100%;
    background-color: yellow;
}

@media screen and (max-width: 850px){
    .flexContainer{
       max-width: 60%; 
    }
}
</code></pre>

<p><a href="https://jsfiddle.net/b5h9rjcd/2/" rel="nofollow noreferrer">JSFiddle</a> in which you can see that the <code>max-width</code> property changes at <code>835px</code> instead of <code>850px</code>.</p>

<p><strong>EDIT:</strong> I add two screenshots so you can see it:</p>

<p><a href="https://i.stack.imgur.com/5krZV.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/5krZV.png" alt="enter image description here"></a></p>

<p><a href="https://i.stack.imgur.com/RwhYe.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/RwhYe.png" alt="enter image description here"></a></p>

<p>Why the media query is being executed after it should?</p>