html,body {
height: 100%;
}
body {
font-family: sans-serif;
}
.container {
padding: 20px;
height: 100%;
display: flex;
flex-direction: column;
flex-grow: 1;
}
<div class="container">
<h3>Title</h3>
<hr/>
<div class="content">
<p>This is some content</p>
</div>
</div>
查看this pen.
这种行为在Firefox和Chrome上得到证实.我没有找到任何解释.我该怎么解决？
解决方法
hr element,预计将以这种风格呈现：
hr { color: gray; border-style: inset; border-width: 1px; margin: 0.5em auto; }
具体来说,请注意margin-left：auto,margin-right：auto.
这些样式用于水平居中的块元素.根据Calculating widths and margins – Block
If both
margin-leftandmargin-rightareauto,their used values
are equal. This horizontally centers the element with respect to the
edges of the containing block.
在块布局中,如果块具有明确的宽度,则该效果才会显着,否则块将增长以覆盖其所有包含的块.
在FlexBox中,它类似：默认的align-self: auto和align-items: stretch使Flex项目增长,以覆盖交叉轴上的Flex线(列布局中的水平线)和auto margins can also be used to center.
然而,有很大的区别：根据Cross Size Determination,align-self：stretch不会影响具有自动边距的flex项目：
If a flex item has 07006,its computed cross size
property isauto,and neither of its cross-axis margins areauto,
the used outer cross size is the used cross size of its flex line,
clamped according to the item’s min and max cross size properties.
Otherwise,the used cross size is the item’s 07007.
hr {
margin-left: 0;
margin-right: 0;
}
.container {
padding: 20px;
display: flex;
flex-direction: column;
}
hr {
margin-left: 0;
margin-right: 0;
}
<div class="container">
<h3>Title</h3>
<hr />
<div class="content">
<p>This is some content</p>
</div>
</div>
或者,通过宽度或最小宽度强制一定宽度将抵消由自动边缘引起的收缩(更技术上,缺乏拉伸).
