css – 具有显示flex的内部容器已损坏

这个行为有点奇怪.如果存在其显示属性设置为flex和flex-direction到列的容器,则< hr>其内部的元件将变化并变为垂直,并且其高度将降低以适应线的高度.

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上得到证实.我没有找到任何解释.我该怎么解决？

解决方法

根据 HTML5 Rendering – The 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-left and margin-right are auto,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 is auto,and neither of its cross-axis margins are auto,
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>

或者,通过宽度或最小宽度强制一定宽度将抵消由自动边缘引起的收缩(更技术上,缺乏拉伸).