如何在不设置静态高度值且没有绝对位置的情况下强制将绿色框包含在红色框中？
我想缩小内容以适应父级.
允许内容(在这种情况下为视频)缩小并允许滚动条.
.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 0 auto;
background: green;
padding: 5px;
margin: 5px;
}
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> …