调整大小时的回流问题：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; 
}