marcello: Computed Style bei Chrome DevTools mixt Werte eines Attributs

Beitrag lesen

Hallo,

kann mir jemand sagen, ob es sich hier um einen Bug meines Browsers handelt? Alle anderen Erklärungsversuche meinerseits sind leider gescheitert :)

Folgendes html:

  
<!DOCTYPE HTML>  
<html>  
<head>  
<style type="text/css">  
html, body { width: 100%; display: block; margin: 0; padding: 0; }  
  
.wrap{  
  border:1px solid red;  
  margin-left: auto;  
  margin-right: auto;  
  width: 57em;  
  display: flex;  
  justify-content: center;  
}  
  
#footer{  
  justify-content: space-between;  
}  
</style>  
  
</head>  
<body>  
  
<div class="wrap" id="footer">  
  <div>Text linksbündig</div>  
  <div>Text rechtsbündig</div>  
</div>  
  
</body>  
</html>  

Laut dieser Seite müssten die neusten Browser eigentlich mit flex umgehen können. Bei mir klappts auch im Firefox und IE. D.h. die beiden divs sitzen links und rechts außen im übergeordneten Container. Nur mein Chrome macht Probleme. Scheinbar überschreibt die Regel für den ID-Selektor die des Klassen-Selektor nicht, sondern beide werden quasi gemixt. Der erste div rutscht in die Mitte des Containers, der zweite rutscht rechts aus dem Container raus.

Schaut man in den DevTools nach, steht da unter dem Tab computed: "justify-content: space-between center;"

Warum geht sowas überhaupt? Soweit ich weiß, gibt es den Wert "space-between-center" gar nicht.

?!

Klar könnte ich auch einfach eine neue Klasse verwenden, statt einen Wert aus .wrap per ID zu überschreiben. Ich will aber wissen, was hier falsch läuft / ich falsch gemacht habe.

--
Eine Frage ist genau dann fragwürdig, wenn der summierte Nutzen, der allen (zukünftigen) Lesern des Threads durch eine kompetente Beantwortung der Frage entsteht, die summierten Mühen aller potentiellen Fragebeantworter übersteigt. Generiert eine Frage auf inhaltlicher Ebene einen negativen Nettonutzen, so kann durch ein nettes Pläuschchen der Beteiligten zusätzlicher Nutzen generiert werden. (Thread Net Utility by marcello)