Flex 项目不会垂直扩展以容纳内容

Question

我网站的各个部分是垂直堆叠的，每个部分的内容都以flexbox垂直和水平居中。

每个部分至少应填满整个屏幕，但如果内容不合适，则垂直增长。以下适用于除 IE11 之外的所有主要浏览器（如果您愿意，可以使用 fiddle）。

html,
body {
  margin: 0;
  padding: 0;
  width: 100%;
  height: 100%;
}

body {
  /* comment the following out to see the desired outcome */
  /* display: flex;
  flex-direction: column; */
}

section {
  /* relevant stuff */
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 100%;
  
  /* unimportant aesthetic stuff */
  border: 1px solid white;
  background: #442;
  color: white;
  font-family: Calibri;
  font-size: 35px;
  padding: 0px 100px;
}


/* more unimportant aesthetic stuff */
section:nth-of-type(2n) {
  background: #553;
}

<section>
  I'm a section. Scroll down.
</section>
<section>
  I'm another section. Keep scrolling.
</section>
<section>
  The next section will expand to accommodate its contents.
</section>
<section>
  <!-- a bunch of dots -->
 .<br><br>.<br><br>.<br><br>.<br><br>.<br><br>.<br><br>.<br><br>.<br><br>.
 <br><br>.<br><br>.<br><br>.<br><br>.<br><br>.<br><br>.<br><br>.<br><br>.
 <br><br>.<br><br>.<br><br>.<br><br>.<br><br>.<br><br>.<br><br>.<br><br>.
 <br><br>.<br><br>
</section>
<section>
  If only it was this easy.
</section>

由于 IE11 的 min-height 错误，我使用了众所周知的解决方法，即将我的 flex 容器包装在另一个 flex 容器中。但是现在我的部分不再扩展以容纳它们的内容（如果您愿意，可以使用 fiddle）。

html,
body {
  margin: 0;
  padding: 0;
  width: 100%;
  height: 100%;
}

body {
  /* comment the following out to see the desired outcome */
  display: flex;
  flex-direction: column;
}

section {
  /* relevant stuff */
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 100%;
  
  /* unimportant aesthetic stuff */
  border: 1px solid white;
  background: #442;
  color: white;
  font-family: Calibri;
  font-size: 35px;
  padding: 0px 100px;
}


/* more unimportant aesthetic stuff */
section:nth-of-type(2n) {
  background: #553;
}
body {
  background: black;
}

<section>
  I'm a section. Scroll down.
</section>
<section>
  I'm another section. Keep scrolling.
</section>
<section>
  How did these dots get on me?
</section>
<section>
  <!-- a bunch of dots -->
 .<br><br>.<br><br>.<br><br>.<br><br>.<br><br>.<br><br>.<br><br>.<br><br>.
 <br><br>.<br><br>.<br><br>.<br><br>.<br><br>.<br><br>.<br><br>.<br><br>.
 <br><br>.<br><br>.<br><br>.<br><br>.<br><br>.<br><br>.<br><br>.<br><br>.
 <br><br>.<br><br>
  
</section>
<section>
  The sections aren't expanding!
</section>

什么是适用于 IE11 的干净解决方案？它应该给我与第一个代码 sn-p 相同的结果，但在 IE11 中。

Answer 1

不要使用标准的 percentages，它通常依赖于父元素的指定高度，并且在浏览器之间呈现不同，而是考虑使用 viewport 百分比单位，它只依赖于在视口尺寸上。

这应该就是您所需要的。在 Chrome、FF 和 IE11 中测试。

body {
  margin: 0;
  display: flex;
  flex-direction: column;
}

section {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  min-height: 100vh;  /* NEW */
  
  /* unimportant aesthetic stuff */
  border: 1px solid white;
  background: #442;
  color: white;
  font-family: Calibri;
  font-size: 35px;
  padding: 0px 100px;
}

/* more unimportant aesthetic stuff */
section:nth-of-type(2n) {
  background: #553;
}

<section>
  I'm a section. Scroll down.
</section>
<section>
  I'm another section. Keep scrolling.
</section>
<section>
  The next section will expand<br>to accommodate its contents.
</section>
<section>
  <!-- a bunch of dots -->
 .<br><br>.<br><br>.<br><br>.<br><br>.<br><br>.<br><br>.<br><br>.<br><br>.
 <br><br>.<br><br>.<br><br>.<br><br>.<br><br>.<br><br>.<br><br>.<br><br>.
 <br><br>.<br><br>.<br><br>.<br><br>.<br><br>.<br><br>.<br><br>.<br><br>.
 <br><br>.<br><br>
</section>
<section>
  If only it was this easy.
</section>

Revised Fiddle

来自规范：

5.1.2. Viewport-percentage lengths: the vw, vh, vmin, vmax units

视口百分比长度与 初始包含块。当初始的高度或宽度 包含块被更改，它们会相应地缩放。

• vw unit - 等于初始包含块宽度的 1%。
• vh unit - 等于初始包含高度的 1% 阻止。
• vmin 单位 - 等于vw 或vh 中的较小者。
• vmax 单位 - 等于vw 或vh 中的较大者。