灵活的孩子正在脱离父母

如何在不设置静态高度值和不设置绝对位置的情况下强制将绿色框包含在红色框中？

我想缩小内容，以适应家长。

允许内容(本例中为视频)收缩，允许滚动条。

.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>
<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>

82457 次浏览
小开
最佳答案

解决方案 # 1-没有滚动

在视频容器上使用 flex: 1而不是 flex: 1 0 auto。这会根据可用空间而不是内容的固有高度来调整项的大小。

然后，因为 flex 条目不能小于其内容的大小，所以默认情况下将 min-height: auto添加到 min-height: 0中，以允许条目缩小以适应容器。

.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>

解决方案 # 2-使用滚动

或者，给视频容器 overflow: auto，它做同样的上面，除了它保持视频的全宽度。您需要启用 flex-shrink才能正常工作。

.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>

这里将更详细地解释这两种解决方案:

小开

如前所述，允许内容(本例中的视频)缩小，允许滚动条。把 overflow:auto;放在 .box-grow类上，把 flex-shrink: 1;设成 flex: 1 1 auto;怎么样 或者，如果你设置的 flex: 1 1 100%;的视频将适合中心的 .box-grow类也将需要 overflow:auto。 

.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;  /* Set the shrik 1 which is by default */
background: green;
padding: 5px;
margin: 5px;
overflow:auto; /* Overflow will be needed if you set flex:1 1 100%*/
}


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>

小开

在我的情况下，我有一个 max-width的孩子，然后在叶子节点的深处有 width: 100%，不知怎么的，这是采取的外部浏览器宽度，而不是内部宽度

解决方案是给中间的伸缩子元素也赋予最大宽度。


提交答案