Solution #1 – Without Scroll
Instead of flex: 1 0 auto on the video container, just use flex: 1. This sizes the item based on available space, not the intrinsic height of the content.
Then, because flex items cannot be smaller than the size of their content – min-height: auto is the default – add min-height: 0 to allow the item to shrink to fit inside the container.
.box-grow {
flex: 1; /* formerly flex: 1 0 auto; */
background: green;
padding: 5px;
margin: 5px;
min-height: 0; /* new */
}
.my-box {
height: 300px;
width: 600px;
background: red;
padding: 5px;
}
.content-box {
background: blue;
}
.col {
display: flex;
flex-direction: column;
justify-content: space-between
}
.box-shrink {
flex: 0 1 auto;
background: green;
padding: 5px;
margin: 5px;
}
.box-grow {
flex: 1; /* formerly flex: 1 0 auto; */
background: green;
padding: 5px;
margin: 5px;
min-height: 0; /* new */
}
video {
max-height: 100%;
max-width: 100%;
margin: auto;
display: block;
}<div class="my-box col">
<div class="box-shrink">
small sized static content
</div>
<div class="content-box box-grow">
<video controls>
<source src="http://techslides.com/demos/sample-videos/small.webm" type="video/webm">
</video>
</div>
<div class="box-shrink">
small sized static content
</div>
</div>Solution #2 – With Scroll
Alternatively, give the video container overflow: auto, which does the same as above, except it keeps the video full-width. You need to enable flex-shrink for this to work.
.box-grow {
flex: 1 1 auto; /* formerly flex: 1 0 auto; */
background: green;
padding: 5px;
margin: 5px;
overflow: auto; /* new */
}
.my-box {
height: 300px;
width: 600px;
background: red;
padding: 5px;
}
.content-box {
background: blue;
}
.col {
display: flex;
flex-direction: column;
justify-content: space-between
}
.box-shrink {
flex: 0 1 auto;
background: green;
padding: 5px;
margin: 5px;
}
.box-grow {
flex: 1 1 auto; /* formerly flex: 1 0 auto; */
background: green;
padding: 5px;
margin: 5px;
overflow: auto; /* new */
}
video {
max-height: 100%;
max-width: 100%;
margin: auto;
display: block;
}<div class="my-box col">
<div class="box-shrink">
small sized static content
</div>
<div class="content-box box-grow">
<video controls>
<source src="http://techslides.com/demos/sample-videos/small.webm" type="video/webm">
</video>
</div>
<div class="box-shrink">
small sized static content
</div>
</div>Both solutions are explained in more detail here:
- Why doesn’t flex item shrink past content size?