flexbox html5 video fill remaining space - html

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/

Answer 1

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:
Working with the CSS height property and percentage values
Chrome / Safari not filling 100% height of flex parent
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