Reflow Problem beim Ändern der Größe: div Größe

Question

aktualisiert werden soll ich ein ungeradees Reflow-Problem habe, in Chrome.

Wenn ich die Höhe des Browsers ändere, werden die zwei divs am oberen und unteren Rand des pinkfarbenen div nicht aktualisiert, es sei denn, ich mache eine hässliche Timeout-Problemumgehung, wo ich den Container verstecke und zeige mag diese Problemumgehung nicht. Dies funktioniert in FF und Safari, also ist es ein Chrome-Bug.

Eine wichtige Voraussetzung ist, dass die rosa Mitte div die Größe des übergeordneten div diktiert, weil es ein Video ist, und ich brauche es in voller Höhe zu zeigen, ohne die Breite angeben.

Gibt es eine Möglichkeit, dieses Problem zu beheben, ohne hässliche JS Abhilfen zu tun?

HTML:

<div class="video-wrapper"> 
    <div class="header"><div class="left"></div><div class="right"></div></div> 
    <div class="video"> 
    <span>1</span> 
    <video></video> 
    </div> 
    <div class="footer"><div class="left"></div><div class="right"></div></div> 
</div> 

CSS:

.video-wrapper{ 
    display: inline-block; 
    height: 100%; 
} 

.video-wrapper .header, 
.video-wrapper .footer{ 
    width: 100%; 
    height: 8px; 
    border: 1px solid; 
} 

.video-wrapper .video{ 
    height: calc(100% - 16px); 
} 

.video-wrapper video { 
    height: 100%; 
    border: 1px solid pink; 
} 

.video-wrapper span{ 
    position: absolute; 
    top:20px; 
    left:0; 
} 

Hier ist eine JSFiddle mit der Wiedergabe: https://jsfiddle.net/7o27qkpx/3/

Answer 1

Ich glaube, ich habe Ihre Anforderung verstanden und auf der Grundlage, dass ich bearbeitet Ihre css, bitte ersetzen Sie dies mit Ihrem CSS und lassen Sie mich wissen, ob dies in Ordnung ist, und wenn ja, ich werde den Code erklären und wenn nicht, dann können Sie bitte klären Sie Ihre Anforderung präzisere ly.

Edited Css:

  .video-wrapper{ 
    display: block; 
    height: 100%; 
      position: relative; 
} 

.video-wrapper .header, 
.video-wrapper .footer{ 
    width: 100%; 
    height: 8px; 
    border: 1px solid; 
} 

.video-wrapper .video{ 
    height: calc(100% - 16px); 
    width: 100%; 
} 

.video-wrapper video { 
    height: 100%; 
    border: 1px solid pink; 
    width: 100%; 
} 

.video-wrapper span{ 
    position: absolute; 
    top:20px; 
    left:0; 
}