html - 调整大小时回流问题 : div size should be updated

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