Html 子元素使用 flex 扩展到父元素之外
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/42536619/
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
Child elements expanding outside parent element with flex
提问by Erdss4
I have used CSS flex to display two divs side by side which are contained inside a wrapper and I have been trying so that inside #myClippetWrapperis where I set the height, so in the child elements of #myClippetWrapperI can just set height: 100%;.
我使用 CSS flex 并排显示包含在包装器内的两个 div，我一直在尝试在里面#myClippetWrapper设置高度，所以在#myClippetWrapper我的子元素中我可以只设置height: 100%;.
But as you can see from running the snippet below all of the elements inside #myClippetWrappergo outside of the main section, they are all hanging out of the main content div?
但是从运行下面的代码片段可以看出，里面的所有元素#myClippetWrapper都在主要部分之外，它们都挂在主要内容 div 之外？
I don't want to use overflow: autobecause I do not want a scroll bar there, I just need the child elements of #myClippetWrapperto not be outside of the main section/ div.
我不想使用，overflow: auto因为我不想在那里有滚动条，我只需要 的子元素#myClippetWrapper不要在主要部分/div 之外。
main {
margin: 0 auto;
margin-top: 10px;
margin-bottom: 10px;
padding: 8px;
background-color: red;
width: 100%;
max-width: 50%;
height: auto;
}
#myClippetWrapper {
display: flex;
height: 700px;
}
#clippetNav {
padding: 10px;
width: 250px;
height: 100%;
background-color: #222222;
margin-right: 10px;
}
#codeAndNotesWrapper {
display: flex;
width: 100%;
}
#codeAndNotesWrapper>div {
flex-basis: 100%;
height: 100%;
}
#codeView {
padding: 10px;
/*flex: 0 0 40%;*/
height: 100%;
background-color: #222222;
margin-right: 10px;
}
#noteView {
padding: 10px;
/*flex: 1;*/
height: 100%;
background-color: #222222;
}
#codeNotesEditor {
height: 100%;
background-color: #EAEAEA;
}<main>
<div id="myClippetWrapper">
<div id="clippetNav">
</div>
<div id="codeAndNotesWrapper">
<div id="codeView">
</div>
<div id="noteView">
<div id="codeNotesEditor">
</div>
</div>
</div>
</div>
</main>采纳答案by Michael Benjamin
In many cases, flexbox eliminates the need to use percentage heights.
在许多情况下，flexbox 消除了使用百分比高度的需要。
An initial setting of a flex container is align-items: stretch. This means that in flex-direction: row(like in your code) flex items will automatically expand the full height of the container.
flex 容器的初始设置是align-items: stretch. 这意味着在flex-direction: row（就像在您的代码中一样）弹性项目将自动扩展容器的整个高度。
Alternatively, you can use flex-direction: columnand then apply flex: 1to the children, which can also make a flex item expand the full height of the parent.
或者，您可以使用flex-direction: column然后应用flex: 1到子项，这也可以使 flex 项扩展父项的整个高度。
main {
max-width: 50%;
margin: 10px auto;
padding: 8px;
background-color: red;
}
#myClippetWrapper {
display: flex;
height: 700px;
}
#clippetNav {
display: flex;
padding: 10px;
width: 250px;
margin-right: 10px;
background-color: #222222;
}
#codeAndNotesWrapper {
display: flex;
width: 100%;
}
#codeAndNotesWrapper>div {
display: flex;
flex-basis: 100%;
}
#codeView {
display: flex;
padding: 10px;
margin-right: 10px;
background-color: #222222;
}
#noteView {
display: flex;
flex-direction: column;
padding: 10px;
background-color: #222222;
}
#codeNotesEditor {
flex: 1;
background-color: #EAEAEA;
}<main>
<div id="myClippetWrapper">
<div id="clippetNav"></div>
<div id="codeAndNotesWrapper">
<div id="codeView"></div>
<div id="noteView">
<div id="codeNotesEditor"></div>
</div>
</div>
</div>
</main>jsFiddle
js小提琴
回答by Steven Johnston
Add
添加
box-sizing: border-box;
To your child elements. This will make the padding show on the inside of the box rather than the outside and will not increase the overall size.
到您的子元素。这将使填充显示在盒子的内部而不是外部，并且不会增加整体尺寸。
回答by sol
Add the box-sizingproperty..
添加box-sizing属性..
* {
box-sizing: border-box;
}
main {
margin: 0 auto;
margin-top: 10px;
margin-bottom: 10px;
padding: 8px;
background-color: red;
width: 100%;
max-width: 50%;
height: auto;
}
#myClippetWrapper {
display: flex;
height: 700px;
}
#clippetNav {
padding: 10px;
float: left;
width: 250px;
height: 100%;
background-color: #222222;
margin-right: 10px;
}
#codeAndNotesWrapper {
display: flex;
width: 100%;
}
#codeAndNotesWrapper>div {
flex-basis: 100%;
height: 100%;
}
#codeView {
padding: 10px;
/*flex: 0 0 40%;*/
height: 100%;
background-color: #222222;
margin-right: 10px;
}
#noteView {
padding: 10px;
/*flex: 1;*/
height: 100%;
background-color: #222222;
}
#codeNotesEditor {
height: 100%;
background-color: #EAEAEA;
}<main>
<div id="myClippetWrapper">
<div id="clippetNav">
</div>
<div id="codeAndNotesWrapper">
<div id="codeView">
</div>
<div id="noteView">
<div id="codeNotesEditor">
</div>
</div>
</div>
</div>
</main>