调整大小时出现重排问题:应更新 div 大小

Question

我在Chrome中有一个奇怪的回流问题。

当我调整浏览器的高度时，粉红色div 顶部和底部的两个div 不会更新它们的宽度，除非我正在执行一个丑陋的超时解决方法，我隐藏并显示容器(我不喜欢那个解决方法(。这适用于FF和Safari，所以这是一个Chrome错误。

一个重要的要求是粉红色的中间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 ：

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