Flex-Grow div with Video tag growing to include header size when 'DOCTYPE html' included

问题

I am using Chrome 81, latest.

I am including a <video> inside a <div> container which is set to flex-grow: 1. The idea is there is a header, and the bottom of the page fills to be the video, which will be contained the best possible. The strange problem is that when the window shrinks vertically and when the full picture size fits the window a scrollbar appears and grows until the size of the header is contained by the scrollbar. Once the header is contained in the scrollbar, the video also begins to shrink. For example:

I originally thought this was a Vuetify issue and asked this question at How to allow flex in Vuetify to exclude a header when vertically shrinking a video. Since then I have narrowed it down to pure HTML -- and in fact, to the the DOCTYPE tag. If I remove <!DOCTYPE html> the scrollbar behaves exactly as I want. If I add DOCTYPE back the bug reappears.

Here is the HTML:

<!DOCTYPE html>
<html>
  <body style="margin: 0">
    <div style="display: flex; flex-direction: column; height: 100vh; max-height: 100vh">
      <div style="background-color: red">
        <div style="height: 100px"></div>
      </div>
      <div style="position: relative; flex-grow: 1; margin: 0 auto; width: 100%; height: 100%">
        <video src="https://test-videos.co.uk/vids/bigbuckbunny/mp4/h264/360/Big_Buck_Bunny_360_10s_1MB.mp4" style="width: 100%; height: 100%; background-color: black" controls></video>
      </div>
    </div>
  </body>
</html>

I am not really able to control the DOCTYPE tag on JSFiddle etc.

Does anybody know how I can get the behavior that I want?

回答1:

In the case somebody else runs into this problem in the future, the only way I have been able to get the <video> tag to size the way I want is by using a <table> for the cells to vertically size. The video tag goes right along with it (see code below). It feels like flex-grow should work, but I can't seem to get it to work with <video>. If you can demonstrate how to get it to work, please do. Thanks!

<!DOCTYPE html>
<html>
  <body style="margin: 0">
    <table style="height: 100vh; min-height: 100vh; max-height: 100vh; width: 100%; border-spacing: 0">
      <tr style="height: 100px; background-color: red">
        <td style="padding: 0"></td>
      </tr>
      <tr>
        <td style="padding: 0">
          <div style="position: relative; height: 100%">
            <video src="https://test-videos.co.uk/vids/bigbuckbunny/mp4/h264/360/Big_Buck_Bunny_360_10s_1MB.mp4" style="position: absolute; width: 100%; height: 100%; background-color: black" controls></video>
          </div>
        </td>
      </tr>
    </table>
  </body>
</html>

来源：https://stackoverflow.com/questions/61673902/flex-grow-div-with-video-tag-growing-to-include-header-size-when-doctype-html

标签

html

flexbox

html5-video

doctype