サイズ変更時のリフローの問題：divのサイズを更新する必要があります

Question

Chromeで奇妙なリフローの問題があります。

ブラウザの高さをリサイズすると、ピンクのdivの上下にある2つのdivは、コンテナを非表示にして表示する醜いタイムアウトの回避策を行っていない限り、幅を更新しませんその回避策のように）。これはFFや​​Safariで動作するので、Chromeのバグです。

重要な要件の1つは、ピンクの中間divはビデオであり、幅を指定せずにフルハイトで表示する必要があるため、親divのサイズを指定することです。

醜いJSの回避策を実行しなければこの問題を解決する方法はありますか？

は

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; 
} 

再生にJSFiddleです：https://jsfiddle.net/7o27qkpx/3/

Answer 1

私は私はあなたの条件を理解し、私はあなたを編集したことに基づいていると思いますCss、これをあなたのcssに置き換えて、これが問題ないのかどうか教えてください。もしそうなら、私はコードを説明し、もしそうでなければより正確にあなたの要求を明確にしてくださいまあ。

編集のCss：

あなたは私が任意の幅を使用することはできませんが、私はビデオの高さが適切なアスペクト比を維持することにより、幅を制御したい、幅を100％使用しているため、この作品

  .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; 
}