它應該執行後媒體查詢

我正在與flex項目，所以我認爲這可能是爲什麼我的代碼是一個奇怪的行爲的問題。它應該執行後媒體查詢

我有.flexContainer類有max-width屬性。我調整窗口後，我想這max-width屬性更改爲更高的值，但如果我把我的媒體查詢爲：

@media screen and (max-width: 850px){ 
    .flexContainer{ 
     max-width: 60%; 
    } 
}

元素的max-width在835px而不是850px改變。

這裏是我的代碼：

HTML：

<div id="container"> 
    <div id="left" class="block">Left</div> 
    <div id="center" class="block"> 
    <div class="flexContainer"> 
     <div class="flexDiv"></div> 
    </div> 
    <div class="flexContainer"> 
     <div class="flexDiv"></div> 
    </div> 
    <div class="flexContainer"> 
     <div class="flexDiv"></div> 
    </div> 
    </div> 
    <div id="right" class="block">Right</div> 
</div>

CSS：

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%; 
    } 
}

JSFiddle中，你可以看到，在835px而不是max-width屬性更改850px 。

編輯：我添加兩個屏幕截圖，你可以看到它：