Flexbox's child is not getting the correct height in IE11

Question

Consider this snippet (which works in all major browsers):

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>

In IE11 the td item's height is set to 0, whereas in other browsers it gets the correct value.

Due to this, the video tag is also zeroed out, and it is not visible.

Is this a known issue in IE11? I know about some min-height issue (from https://caniuse.com/#feat=flexbox), but it does not seem to correlate.

How can I make this working in IE11 while preserving the support for the other browsers too?

found the solution: https://stackoverflow.com/a/49322465/1446710 — Daniel, Mar 02 '20 at 16:15

score 0 · Answer 1 · edited Mar 02 '20 at 18:36

Consider putting the <video> content in a <div> instead of a <table>. Additionally, there's no need to absolutely position it:

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

#videoWrapper {
  width: 100%;
  height: 100%;
  background: blue;
  color: white;
  position: relative;
  display:flex;
}

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

<div id="main">

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

    <div id="videoWrapper">
      <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>
    </div>

  </div>

</div>

Rene van der Lende · Answer 2 · 2020-03-03T14:02:08.703

You created a new stacking context with td { position: relative } and without specific height/width values IE thinks it has zero height/width.

Simply remove td {} and modify your video {...} as noted in the snippet (actually remove the stacking context) and you will see IE works as expected.

Apparently more modern browsers have solved this issue.

This will be hard to test through Stackoverflow as SO (oddly enough) no longer supports IE11...

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;
}
/* *** REMOVE ***
td {
  position: relative;
}

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

/* *** KEEP *** */
video { 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>

UPDATE

For your convenience I added a more extensive snippet showing a table with multiple columns and rows. Disabled table width/height, added table border-collapse and a demo td {...}, again without position: relative. Tested to work in IE11 (9,10 mode too).

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">

<title>SO 60492668</title>

<style>
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%; /* temporary disabled */
/*  height: 100%; /* temporary disabled */
  background: blue;
  color: white;
  border-collapse: collapse; /* ADD */
}
/* *** REMOVE ***
td {
  position: relative;
}

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

/* *** KEEP *** */
td    { border: 1px solid rgba(0,0,0,.3); padding: .5rem } /* DEMO */
video { width: 100%; height: auto; max-width: 20rem }
</style>

</head>
<body>
<div id="main">
    <div id="header">Header</div>
    <div id="content">
        <table>
            <tr>
                <td>column 1</td>
                <td>column 2</td>
                <td>column 3</td>
                <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>
                <td>column 5</td>
            </tr>
            <tr>
                <td>column 1</td>
                <td>column 2</td>
                <td>column 3</td>
                <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>
                <td>column 5</td>
            </tr>
            <tr>
                <td>column 1</td>
                <td>column 2</td>
                <td>column 3</td>
                <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>
                <td>column 5</td>
            </tr>
            <tr>
                <td>column 1</td>
                <td>column 2</td>
                <td>column 3</td>
                <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>
                <td>column 5</td>
            </tr>
        </table>
    </div>
</div>
</body>
</html>

Thanks but I need the table. Solution is under the link I've posted as comment. — Daniel, Mar 02 '20 at 17:02
@Daniel, take a closer look, I did not remove the table, just the `position: relative`. Plus, the link you gave does not have an accepted (green box) answer. It may still be open to dispute....just FYI. Additionally, I did not change any of your html code — Rene van der Lende, Mar 02 '20 at 17:05
I've done that but that was caused another issue (video went off-screen). That's why I need both the table both `td { position: relative; }`. Sorry for being confusing. — Daniel, Mar 03 '20 at 11:50
Well, you must have done something with the code in the mean time: I copied the snippet code into a new html document, tested it with the latest versions of Chrome, Edge2020, Firefox AND IE11 (plus 8,9,10 mode. IE8 mode fails) on W10. They all work like a charm without the video going off screen. — Rene van der Lende, Mar 03 '20 at 13:37

Flexbox's child is not getting the correct height in IE11

2 Answers2