Div won't wrap around contents in Firefox - html

Question

I can't get the container to correctly wrap around the video in firefox. Chrome and IE work fine. This is the site: http://www3.carleton.ca/clubs/sissa/html5/video.html
HTML:
<div id="video_container">
<video id="trailers" poster="poster.jpg">
<source src="vLast.mp4" type="video/mp4">
<source src="vLast.webm" type="video/webm">
</video>
<nav>
<div id="controls">
<button id="playButton">Play</button>
<div id="vol" onclick="showSlider()">Vol
<div id="containSlider">
<input type="range" id="vSlider" min="0" max="1" step="0.1" value="0.5"/>
</div>
</div>
<div id="defaultBar">
<div id="progressBar"></div>
</div>
<button id="mute">Mute</button>
<button id="full" onclick="toggleFullScreen()">Full</button>
</div>
<div id="playlist" class="animated fadeInRight">
<div class="thumb" id="tb1"><img src="TbGow.jpg" onClick="changeTrailer('vGow')"/></div>
<div class="thumb" id="tb2"><img src="TbLast.jpg" onClick="changeTrailer('vLast')"/></div>
<div class="thumb" id="tb3"><img src="TbTwo.jpg" onClick="changeTrailer('vTwo')"/></div>
</div>
</nav>
</div>
CSS:
#video_container{
-webkit-box-flex: 1;
-moz-box-flex: 1;
border:5px solid black;
margin: 20px;
padding: 0px;
width:100%;
height:100%;
position: relative;
background-color:white;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
}
#video_container video{
width: 100%;
height: auto;
display: block;
z-index: 9999;
}

Answer 1

FYI Mozilla Firefox is the only browser that still doesn't support flex-wrap. It supports inly single-line flexbox. (flex-wrap needs multi-line flexbox).
Feature Firefox (Gecko)
- Not supported
Chrome
- 21.0-webkit
Internet Explorer
- 10.0-moz
Opera
- full support 12.10
Maxthon
- full support 4.0
https://developer.mozilla.org/en-US/docs/CSS/flex-wrap
I am currently looking for solution...

Answer 2

Alright then Batman :)
Try this
<style>
#-moz-document url-prefix() {
#video_container{
min-height:1px;
max-height:1px;
}
}
</style>
Add this in your html document!

Answer 3

Try #-moz-document url-prefix(), which is a Gecko layout engine rule. Documentation can be found here. Enjoy.