媒体查询应该在它之后执行

Question

我正在处理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您可以在其中max-width更改835px而不是850px。

编辑：我添加了两个屏幕截图，以便您可以看到它：

为什么媒体查询应该在执行之后执行？

Answer 1

我在这里发现了我的问题。我只需删除margin代码的body。

我将尝试重现我在我的真实项目中的效果（我已修复body标记）并再次编辑问题。

编辑：似乎是Google Chrome的错误或类似错误，因为我无法重现错误。

我得到的错误是当我查看html检查员上的Google Chrome标记时，它给了我错误的网页值（大约30px，我没有围绕它的任何padding/margin所以我认为媒体查询是在错误的width屏幕上执行的。

我知道这是一个“愚蠢”的解决方案，但当我关闭并重新打开Google Chrome时它再次起作用。现在它就像正常行为一样。