IE 元素的高度不能跨越其绝对定位的 flex 容器最小高度答案

【问题标题】：IE element's height couldn't span its absolute-positioned flex container by min-heightIE 元素的高度不能跨越其绝对定位的 flex 容器最小高度
【发布时间】：2019-11-16 03:33:26
【问题描述】：

我正在制作一个包含内容会话的简单页面，该页面将跨越其容器的所有高度，以便我可以制作一个全页网页。但是，我需要制作

内容的容器 (div.inner) 绝对定位于 display: flex; flex-flow: column; min-height: 100%;
内容会话 (div.content) 与 flex-grow: 1;

使其成为整页。（我需要让内容的容器绝对定位，以达到更淡化的内容切换效果）

这是我的实现代码，我想知道为什么它只在 Chrome 中工作，而在 IE11 中工作。我可以知道是否有适合我的解决方法吗？

提前致谢。

    html, body {
      height: 100vh;
    }

    .outer {
      position: relative;
      height: 100%;
    }

    .inner {
      display: flex;
      flex-flow: column;
      position: absolute;
      top: 0;
      right: 0;
      left: 0;
      min-height: 100%;
      background-color: lightgreen;
    }

    .no-span-content-upper {
      background-color: lightpink;
    }

    .span-content {
      flex-grow: 1;
      background-color: lightblue;
    }

    .no-span-content-lower {
      background-color: lightyellow;
    }

    <html>
      <head></head>
      <body>
        <div class="outer">
          <div class="inner">
            <div class="no-span-content-upper">
              some dummy content without specific height
            </div>
            <div class="span-content">
              span content here
            </div>
            <div class="no-span-content-lower">
              some dummy content without specific height
            </div>
          </div>
        </div>
      </body>
    </html>

【问题讨论】：

@Deepak-MSFT 我在 stackoverflow 上对其进行了测试，结果在 Chome 和 IE11 之间有所不同。财政年度：https://imgur.com/cwGIA0x
@Deepak-MSFT 不，正如您所见，IE11 呈现的与 Chrome 呈现的不同
@Deepak-MSFT 嘿，你添加了bottom: 0; 吗？不要添加这个
@Deepak-MSFT 怎么会？即使我直接运行它我也会出错...https://imgur.com/cEdHsTS
对不起，我的错误。看起来我测试的代码不正确。

标签： css google-chrome flexbox css-position internet-explorer-11

【解决方案1】：

~~如果你也设置坐标bottom:0;，它工作正常~~但显然不适合你的情况......

html, body {
      height: 100vh;
      margin:0;
    }

    .outer {
      position: relative;
      height: 100%;
    }

    .inner {
      display: flex;
      flex-flow: column;
      position: absolute;
      top: 0;
      right: 0;
      left: 0;
      bottom:0;
      min-height: 100%;
      background-color: lightgreen;
    }

    .no-span-content-upper {
      background-color: lightpink;
    }

    .span-content {
      flex-grow: 1;
      background-color: lightblue;
    }

    .no-span-content-lower {
      background-color: lightyellow;
    }

<html>
      <head></head>
      <body>
        <div class="outer">
          <div class="inner">
            <div class="no-span-content-upper">
              some dummy content without specific height
            </div>
            <div class="span-content">
              span content here
            </div>
            <div class="no-span-content-lower">
              some dummy content without specific height
            </div>
          </div>
        </div>
      </body>
    </html>

解决方案，height 或 min-height:100% / vh + flex-flow : column; 要求父级也设置为 100% 和 flex 列才能在 IE 中工作，这是它的一个错误（如果有人想寻找复制）。为了避免这种情况，您需要一个额外的包装器，通常涉及的 2 个包装器是 html 和 body，但这里因为 absolute : position，从流中取出该元素，您需要添加一个额外的包装器成为绝对的。 ;)

html,
body,
.outer-buffer {
  height: 100vh;
  margin: 0;
}

.outer {
  height: 100%;
  display: flex;
  flex-flow: column;
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
}

.inner {
  display: flex;
  flex-flow: column;
  flex: 1;
  min-height: 100%;
  background-color: lightgreen;
}

.no-span-content-upper {
  background-color: lightpink;
}

.span-content {
  flex-grow: 1;
  background-color: lightblue;
}

.span-content div:hover {
  height: 200vh;
}

.no-span-content-lower {
  background-color: lightyellow;
}

<html>

<head></head>

<body>
  <div class="outer-buffer">
    <div class="outer">
      <div class="inner">
        <div class="no-span-content-upper">
          some dummy content without specific height
        </div>
        <div class="span-content">
          span content here<br>
          <div>hover me to over flow container</div>
        </div>
        <div class="no-span-content-lower">
          some dummy content without specific height
        </div>
      </div>

    </div>
  </div>
</body>

</html>

【讨论】：

我们不能这样做，如果我们将它设置为底部：0，如果内容太多超过100vh，.span-content将被溢出。那么.outer 中.span-content 之后的所有内容都会错位。
@mannok ，您应该已经澄清，在您的问题中，它是一个关于 flex-direction/flow 的已知错误：列和高度或最小高度需要 2 个嵌入元素才能使其工作（不要问我为什么，这是微软的秘密）。我专注于位置：一开始是绝对的.. 答案更新了.. 我又来了。