flexbox html5 video fill remaining space

Question

I try to have a html5 video that fills the remaining space in a flexbox div.

However, it overflows rather than doing what I want:

.wrapper {
  padding: 10px;
  display: flex;
  flex-direction: column;
  max-height: 300px;
  background-color: green;
}
.content {
  width: 100%;
  background-color: red;
}
video {
  width: 100%;
  height: 100%;
}
.footer {
  width: 100%;
  background-color: orange;
}

<div class="wrapper">
  <div class="content">
    <video src="http://www.sample-videos.com/video/mp4/720/big_buck_bunny_720p_1mb.mp4" />
  </div>
  <div class="footer">footer</div>
</div>

https://jsfiddle.net/pwhwL29p/

score 1 · Accepted Answer · edited May 23 '17 at 11:46

You have a video and a footer inside the .wrapper element. The height: 100% on the video may or may not work, depending on the browser (more details below).

Since you don't have a height defined on the .content element, which holds the video, the results are unpredictable and unreliable. Again, browser behavior varies.

Here's a method that is more efficient and reliable across browsers:

.wrapper {
  padding: 10px;
  display: flex;
  flex-direction: column;
  max-height: 300px;
  background-color: green;
}
.content {
  display: flex; /* NEW */
  width: 100%;
  background-color: red;
}

video {
  width: 100%;
  /* height: 100%; <-- REMOVE; not necessary */
}

.footer {
  width: 100%;
  background-color: orange;
}

<div class="wrapper">
 <div class="content">
 <video src="http://www.sample-videos.com/video/mp4/720/big_buck_bunny_720p_1mb.mp4" />
 </div>
  <div class="footer">footer </div>
</div>

revised fiddle

Here's how it works:

Turn the .content flex item, which contains the video, into a flex container.
This activates align-items: stretch, a default setting, which makes the video consume all available space in the cross-axis (in this case, height).
Remove height: 100%. Flex layout handles height dynamically.

More details:

UPDATE

From the comments:

Thank you. it works great for the standard video tag. Unfortunately it breaks with video.js

The video script adds a container to the HTML structure:

As a result, the function of the .content flex container no longer works.

You'll need to make adjustments to the CSS. Add this:

#video {
  display: flex;
  height: auto;
  width: 100%;
}

revised fiddle

Thank you. it works great for the standard video tag. Unfortunately it breaks with video.js --> http://jsfiddle.net/pwhwL29p/6/ — Chris, Dec 31 '16 at 17:13

flexbox html5 video fill remaining space

1 Answers1

UPDATE