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

Question

我正在处理 flex 个项目，所以我认为这可能是我的代码出现奇怪行为的原因。

我有 .flexContainer class 有一个 max-width 属性。调整 window 大小后，我想将此 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

我在这里发现了我的问题。只是我不得不删除 body 标签的 margin。

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

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

我得到的错误是，当我查看 Google Chrome 检查器上的 html 标签时，它给了我错误的网页值（少了大约 30px，我确实这样做了周围没有任何 padding/margin）所以我认为媒体查询是在屏幕的错误 width 中执行的。

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

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

Media query being executed after it should

html

css

media-queries

flexbox