title: Reflow issue when resizing: div size should be updated
body: <p>I have an odd reflow issue, in Chrome. </p>
  
  <p>When I resize the browser's height, the two divs at the top and bottom of the pink div don't get their width updated, unless I'm doing an ugly timeout workaround where I hide and show the container (I don't like that workaround). This works in FF and Safari, so it's a Chrome bug.</p>
  
  <p>One important requirement is that the pink middle div dictates the size of the parent div because it's a video and I need to show it in full height, without specifying the width. </p>
  
  <p>Is there a way to fix this issue without doing ugly JS workarounds?</p>
  
  <p>HTML:</p>
  
  <pre><code>&lt;div class="video-wrapper"&gt;
    &lt;div class="header"&gt;&lt;div class="left"&gt;&lt;/div&gt;&lt;div class="right"&gt;&lt;/div&gt;&lt;/div&gt;
    &lt;div class="video"&gt;
      &lt;span&gt;1&lt;/span&gt;
      &lt;video&gt;&lt;/video&gt;
    &lt;/div&gt;
    &lt;div class="footer"&gt;&lt;div class="left"&gt;&lt;/div&gt;&lt;div class="right"&gt;&lt;/div&gt;&lt;/div&gt;
  &lt;/div&gt;  
  </code></pre>
  
  <p>CSS:</p>
  
  <pre><code>.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;
  }
  </code></pre>
  
  <p>Here is a JSFiddle with the reproduction: <a href="https://jsfiddle.net/7o27qkpx/3/" rel="nofollow noreferrer">https://jsfiddle.net/7o27qkpx/3/</a></p>