Media-Abfrage wird ausgeführt, nachdem es

Question

Ich arbeite mit flex Artikel, so dass ich denke, es könnte das Problem sein, warum mein Code ein seltsames Verhalten macht.

Ich habe .flexContainer Klasse, die eine max-width Eigenschaft hat. Nachdem ich die Größe des Fensters, möchte ich auf einen höheren Wert dieses max-width Eigenschaft ändern, aber wenn ich meine Medienabfrage nach:

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

die max-width des Elements bei 835px statt 850px ändern.

Hier ist mein Code:

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, in dem Sie, dass die max-width Eigenschaftsänderungen bei 835px sehen statt 850px .

EDIT: Ich füge zwei Screenshots, damit Sie es sehen können:

Warum die Medien Abfrage ausgeführt wird, nachdem es sein sollte?

Answer 1

Ich habe mein Problem hier gefunden. Nur musste ich die margin des body Tags entfernen.

Ich werde versuchen, den Effekt zu reproduzieren, den ich auf meinem realen Projekt habe (in dem ich body Tag behoben habe) und die Frage erneut bearbeiten.

EDIT: Es scheint, dass es ein Fehler oder etwas ähnliches von Google Chrome war, weil ich den Fehler nicht mehr reproduzieren kann.

Der Fehler, ich war immer, dass, wenn ich bei html Tag auf meinem Google Chrome Inspektor sah es die falschen Werte für die Webseite mir gab (etwa 30px weniger, und ich habe keine padding/margin um ihn herum), damit ich dachte, dass die Medienabfragen in der falschen width des Bildschirms ausgeführt wurden.

Ich weiß, das ist eine "dumme" Lösung, aber es funktionierte wieder, als ich geschlossen und wieder geöffnet Google Chrome. Jetzt funktioniert es wie normales Verhalten.