Flexbox - hauteur incorrecte de l'élément dans IE

Question

Dans ce jsFiddle: http://jsfiddle.net/VCkLy/

Lorsque nous utilisons Chrome et redimensionner une fenêtre qui porte la taille de la vidéo plus petite que sa largeur réelle du « log » boîte avec des objets reste toujours attaché à le fond de la vidéo, alors que dans IE il le suit quand la vidéo devient plus grande bien que quand sa taille devient plus petite que sa largeur normale - deux barres noires apparaissent au-dessus et au-dessous de la vidéo .. Y at-il de toute façon? Cela ne se produit pas si nous définissons le "display" sur un bloc ou un bloc en ligne, mais en raison de la nature du projet (ce n'est qu'un cas simplifié), je ne peux pas changer l'affichage pour autre chose que "flex". Y a-t-il des réglages CSS?

#content { 
    display: inline-block; 
    ... 
} 

Si possible, je voudrais également éviter d'ajouter JS qui définit une hauteur - il fonctionne très bien dans Chrome, Safari, Opera & Firefox (avec une vidéo différente) obtient juste bogué dans IE .. Merci les gars !

Answer 1

Ok Je viens de trouver une solution CSS qui fonctionne, on dirait qu'après le chargement de la vidéo IE définit une hauteur minimale par défaut à la hauteur de la vidéo originale, mais si on la remplace par une valeur différente en pixels, petit, disons 1px - alors ça marche bien.

#video { 
    width: 100%; 
    height: auto;   
    min-height: 1px; 
}