調整大小時的迴流問題：div大小應該更新

Question

我有一個奇怪的迴流問題，在Chrome中。

當我調整瀏覽器的高度時，粉紅色div頂部和底部的兩個div不會更新它們的寬度，除非我在隱藏和顯示容器時執行醜陋的超時解決方法不喜歡這種解決方法）。這適用於FF和Safari，所以這是一個Chrome的bug。

一個重要的要求是，粉紅色的中間格指示父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替換這個，讓我知道如果這是好的，如果是的話，我會解釋代碼，如果沒有，那麼你能否澄清你的要求更精確LY。

編輯定製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; 
}