Html flex 孩子正在从父母那里长大
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/41674979/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
flex child is growing out of parent
提问by Exlord
How to force the green boxes to be contained in the red one without setting a static height value and no absolute position?
如何在不设置静态高度值和没有绝对位置的情况下强制将绿色框包含在红色框中？
I want to shrink the content to fit into the parent.
我想缩小内容以适应父级。
The content (video in this case) is allowed to shrink and scrollbars are allowed.
允许内容（在这种情况下为视频）缩小并允许滚动条。
.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>回答by Michael Benjamin
Solution #1 - Without Scroll
解决方案#1 - 没有滚动
Instead of flex: 1 0 autoon the video container, just use flex: 1. This sizes the item based on available space, not the intrinsic height of the content.
而不是flex: 1 0 auto在视频容器上，只需使用flex: 1. 这根据可用空间来调整项目的大小，而不是内容的固有高度。
Then, because flex items cannot be smaller than the size of their content – min-height: autois the default – add min-height: 0to allow the item to shrink to fit inside the container.
然后，因为弹性项目不能小于其内容的大小——这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>Solution #2 - With Scroll
解决方案#2 - 使用滚动
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-shrinkfor this to work.
或者，给 video container 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>Both solutions are explained in more detail here:
此处更详细地解释了这两种解决方案：
回答by Mostafa Baezid
As you said, the content (a video in this case) is allowed to shrink and scrollbars are allowed. How about putting overflow:auto;on the .box-growclass and set flex-shrink: 1;like, flex: 1 1 auto;Or if you set the flex: 1 1 100%;the video will fit center on the .box-growclass also overflow:autowill be needed.
正如您所说，允许内容（在本例中为视频）缩小并允许滚动条。如何把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>