Using flex as display, and having a video as child does not respect my fill setting

Question

I'd like to have on an HTML page:

header div - some height, based on its contents
content div (below header) - take the rest of the height below header
table (in content div) - take 100% for both dimensions of its parent (content div)
video item (in table) - take and reserve 100% for both dimensions of its parent (td)

Here is what I have:

body { margin: 0; }

#main {
  position: absolute;
  left:0px;
  top:0px;
  
  display: flex;
  flex-direction: column;
  height: 100vh;
  width: 100vw;
  background:red;
}

#header {
  background:yellow;
}

#content {
  background:gray;
  flex:1;
}

table {
  width: 100%;
  height: 100%;
  background: blue;
  color: white;
}

video {
  width: 100%;
  height: 100%;
}

<html>

<body>

<div id="main">

<div id="header">
Header
</div>
<div id="content">


<table>
<tr>
  <td>
    <video controls>
      <source src="https://test-videos.co.uk/vids/bigbuckbunny/mp4/h264/1080/Big_Buck_Bunny_1080_10s_1MB.mp4" type="video/mp4">
    </video>
  </td>
</tr>
</table>

</div>


</div>

</body>
</html>

Now, the problem is with the video tag (if you run this snippet there will be scrollbars - I don't want them).

If I remove the video tag, everything works as intended. However, if there is the video tag, it ruins the 'flex' option: it enlarges the td, hence the table becomes also larger and then the content also - so scrollbar(s) are enabled and the page won't fit into the screen.

Maybe the video is resized when the media is loaded, and at that time all css operations are finished.

But what is the way to make the video to be the exact same size as 100% width and height of its parent (the td) even during playback?

sometimes table is this simple (1row, 1col), but sometimes it is larger (3row, 3col) and it's generated dynamically - probably not a must but I don't want to mix things in one question. — Daniel, Mar 02 '20 at 10:15

score 1 · Accepted Answer · answered Mar 02 '20 at 10:32

1

You can make the video position:absolute

body {
  margin: 0;
}

#main {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  display: flex;
  flex-direction: column;
  background: red;
}

#header {
  background: yellow;
}

#content {
  background: gray;
  flex: 1;
  min-height: 0;
}

table {
  width: 100%;
  height: 100%;
  background: blue;
  color: white;
}

td {
  position: relative;
}

video {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

<div id="main">

    <div id="header">
      Header
    </div>
    <div id="content">


      <table>
        <tr>
          <td>
            <video controls>
      <source src="https://test-videos.co.uk/vids/bigbuckbunny/mp4/h264/1080/Big_Buck_Bunny_1080_10s_1MB.mp4" type="video/mp4">
    </video>
          </td>
        </tr>
      </table>

    </div>


  </div>

answered Mar 02 '20 at 10:32

Temani Afif

245,468
26
309
415

This is exactly what I needed. Only one thing is not clear for me: what is the reason of `min-height: 0;` in `#content`? – Daniel Mar 02 '20 at 10:39
1

@Daniel in this particular situation it's not needed but it's good to have it because it will prevent your element to overflow in case there is more content. Related: https://stackoverflow.com/q/36247140/8620333 – Temani Afif Mar 02 '20 at 10:41
Thanks. Any idea on why this is not working in IE11? (tried to check it in JSFiddle, but their page is not working under IE at all. Then tried it with my server, FF, Opera, Edge, Chrome all works fine, but IE no) – Daniel Mar 02 '20 at 14:51
@Daniel well, IE is known to have a lot of issues with flexbox. Unfortunately I cannot test it – Temani Afif Mar 02 '20 at 18:31

kp86284 · Answer 2 · 2020-03-02T10:46:47.983

Do you want this...

body {
  margin: 0;
}

#main {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  display: flex;
  flex-direction: column;
  background: red;
}

#header {
  background: yellow;
}

#content {
  background: gray;
  flex: 1;
  height: 100%;
  
}

table {
  width: 100%;
  height: 100%;
  background: blue;
  color: white;
}

td {
  position: relative;
}

video {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

<html>

<body>

<div id="main">

<div id="header">
Header
</div>
<div id="content">


<table>
<tr>
  <td>
    <video controls>
      <source src="https://test-videos.co.uk/vids/bigbuckbunny/mp4/h264/1080/Big_Buck_Bunny_1080_10s_1MB.mp4" type="video/mp4">
    </video>
  </td>
</tr>
</table>

</div>


</div>

</body>
</html>

No, vertical scrollbar is still there. I want that the video takes the max space that the column > table > td offers. (tried to click on 'Run code snippet') — Daniel, Mar 02 '20 at 10:13

Using flex as display, and having a video as child does not respect my fill setting

2 Answers2