如何使flex容器不强制滚动身体

Question

在我做的代码示例中：

• 将所有边距/填充重置为 0
• 将身高设置为 100%
• 将弹性容器高度设置为 96%
• 将 flex 容器上边距设置为 2%

现在，即使 flex 容器高度 + 边距顶部的总和仅达到 98%，这也给了我在正文上的滚动，所以我的问题是，我不能这样使用边距顶部吗？额外的在哪里空间来自于强制身体滚动？

将 body 设置为 overflow:hidden 会移除滚动条，但这感觉更像是一种创可贴，而不是一种解决方案（除非这是一种“行为设计”，在这种情况下需要这样做）。

编辑

删除 flex 容器上的 margin-top 然后在主体上设置 padding-top: 2%; 或在容器上使用 position: relative; top: 2%; 或使用 absolute: position; 我可以让它按预期工作，但这里的情况这就是margin-top: 2% 不这样做的原因。

* {
  box-sizing: border-box;
  padding: 0;
  margin: 0
}
html, body {
  background-color: gray;
  height: 100%;
}
.outer {
  display: flex;
  flex-flow: column;
  margin: 0 auto;
  height: 96%;
  width: 50%;
  margin-top: 2%;
}
.top {
  background-color: lightgray;
}
.middle {
  background-color: darkgray;
}
.the-rest {
  flex: 1 0 auto;
  background-color: lightgray;
}

<div class="outer">
  <div class="top">
    top
  </div>
  <div class="middle">
    middle
  </div>
  <div class="the-rest">
    content
  </div>
</div>

Answer 1

这是因为百分比边距基于包含块/元素的宽度...在本例中为主体。

W3C Spec

MDN

<percentage> 相对于包含块的宽度。允许使用负值。

Answer 2

我通常在 html 和 body 上使用 vh 和 vw。在这个演示中，我只应用了vh，因为它看起来像一个垂直方向的演示。我还制作了 body 和 html position: relative。使用vw 和vh 有一个真实的测量长度，其他元素（::root 的子元素）实际上可以将它们的相对测量值设置为 100%。我使用position: relative，因为它使html、body 严格地坐在视口内，而viewport 单元将body、html 保持在100vh 和100vw 的边缘。

更新

我认为这种行为是由于collapsing-margins 造成的，所以如果存在不合逻辑的margin-top 行为，请记住这一点。有几种非常具体的情况会导致这种奇怪的行为，也有一些解决方案。针对这些情况的解决方法如下：

1. body, html { 高度: 100vh; } /* 没有相对或绝对定位 */
2. .outer { 最小高度：100%;边距顶部：-2%； } /* 解释了正编号的 margin-top 无效，但负值有效，但不像正常的负值！？ o_0

* {
  box-sizing: border-box;
  padding: 0;
  margin: 0;
}
html,
body {
  position: relative;
  background-color: gray;
  height: 100vh;
}
.outer {
  display: flex;
  flex-flow: column;
  margin: 0 auto;
  min-height: 100%;
  width: 50%;
  margin-top: - 2%;
  border-top: 0;
}
.top- {
  background-color: lightgray;
}
.middle {
  background-color: darkgray;
}
.the-rest {
  flex: 1 0 auto;
  background-color: lightgray;
}
.marker {
  position: absolute;
  outline: 1px solid red;
}

<span class="marker" style="top: 0; left: 0;">top:0|left:0</span>
<span class="marker" style="top: 0; right: 0;">top:0|right:0</span>
<div class="outer">

  <div class="top">
    top
  </div>
  <div class="middle">
    middle
  </div>
  <div class="the-rest">
    content
  </div>
</div>
<span class="marker" style="bottom: 0; left: 0;">bottom:0|left:0</span>
<span class="marker" style="bottom: 0; right: 0;">bottom:0|right:0</span>