css - 显示 flex 的内部容器损坏

Question

这种行为有点古怪。如果有一个容器及其 ​​display属性设置为 flex和 flex-direction至 column , <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 上得到确认。我没有找到任何解释。我该如何解决？

Answer 1

根据 HTML5 Rendering - The hr element ，预计会以这种风格呈现:

hr { color: gray; border-style: inset; border-width: 1px; margin: 0.5em auto; }

具体来说，请注意 margin-left: auto、margin-right: auto。

这些样式用于水平居中 block 元素。根据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.

在 block 布局中，只有当 block 具有明确的宽度时，这种效果才会明显，否则 block 将增长以覆盖其所有包含 block 。

在 Flexbox 中它是相似的:默认的 align-self: auto和 align-items: stretch使 flex 元素增长以覆盖横轴上的 flex 线(列布局中的水平线)，以及 auto margins can also be used to center .

然而，有一个很大的不同:根据Cross Size Determination , align-self: stretch 不影响具有 auto 边距的 flex 元素:

If a flex item has align-self: stretch, 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 hypothetical cross size.

然后，您可以通过删除 auto 边距来解决此问题:

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>

或者，通过 width 或 min-width 强制一定的宽度会抵消由 auto 边距。