Wie kann man ein Flex Item in IE11 visuell ausblenden?

Question

Ich habe ein Problem festgestellt, bei dem ein optisch versteckter Flex-Gegenstand noch immer Platz in seinem Container in IE11 einnimmt, obwohl er nicht sichtbar ist. In einem Flex-Container habe ich den Logo-Text (mit einer visuallyhidden Klasse), ein Logo-Hintergrundbild und eine Menü-Taste.

In Chrome, Firefox und Edge mit dem Inhalt des Containers auf space-between festgelegt, befindet sich das Logo an einem Ende des Containers und die Menüschaltfläche befindet sich am anderen Ende. Dies ist das gewünschte Verhalten.

In IE11 befindet sich links im Container ein großer Platz, als wäre der versteckte Text noch vorhanden.

Wenn jemand eine Lösung dafür hat, vielleicht eine andere Methode, den Text visuell zu verstecken, würde es sehr geschätzt werden.

Ich habe reproduziert das Problem hier: https://codepen.io/anon/pen/mwzYLv

.visuallyhidden { 
 
    border: 0; 
 
    clip: rect(0 0 0 0); 
 
    height: 1px; 
 
    margin: -1px; 
 
    overflow: hidden; 
 
    padding: 0; 
 
    position: absolute; 
 
    width: 1px; 
 
} 
 

 
header { 
 
    display: flex; 
 
    justify-content: space-between; 
 
    align-items: center; 
 
    background: lightgrey; 
 
    max-width: 1400px; 
 
    margin: 0 auto; 
 
    padding: 1em; 
 
} 
 

 
.logo { 
 
    width: 100px; 
 
    height: 100px; 
 
    background-image: url('https://s2.postimg.org/x1g74vb61/33b869f90619e81763dbf1fccc896d8d--lion-logo-mode.jpg'); 
 
    background-size: 100px 100px; 
 
} 
 

 
button { 
 
    height: 50px; 
 
    width: 50px; 
 
    padding: 0; 
 
}

<header> 
 
    <h1 class="visuallyhidden"><a href="#">Hidden logo text</a></h1> 
 
    <a href="#" class="logo" aria-hidden="true"></a> 
 
    <button>MENU</button> 
 
</header>

Answer 1

Hoppla, es gelöst. Ich habe nicht sehr logisch mit meinem Markup nachgedacht.

Ich habe das Markup geändert, so dass es so aussieht, und es funktioniert wie beabsichtigt:

<header> 
    <a href="#" class="logo"><h1 class="visuallyhidden">Hidden logo text</h1></a> 
    <button>MENU</button> 
</header>