ie 11: flex grow parent 问题答案

【问题标题】：ie 11: flex grow parent issueie 11: flex grow parent 问题
【发布时间】：2017-09-19 22:09:48
【问题描述】：

我有这样的代码：

https://plnkr.co/edit/ZAEzfAOCO0ZcSq2OR4Lp?p=preview

但这在 ie 中不起作用，直到我添加 height:0 （这对父元素来说是一个非常糟糕的主意）

  <body>
    <div class="container">
      <div class="container-item container-item-1"></div>
      <div class="container-item container-item-2"></div>
      <div class="container-item container-item-3"></div>
    </div>
  </body>

body, html {
  min-height: 100%;
  height: 100%;
}

.container {
  width: 100%;
  min-height: calc(100% - 80px);
  margin: 30px;
  padding: 20px;
  border: 1px solid gray;
  border-radius: 16px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-flex: 1;
      -ms-flex: 1;
          flex: 1;
}

.container-item {
  -webkit-box-flex: 1;
      -ms-flex: 1;
          flex: 1;
  content: "someText";
  border-bottom: 1px solid #cecece;
}

.container-item-1 {
  background-color: red;
}

.container-item-2 {
  background-color: orange;
}

.container-item-3 {
  background-color: green;
}

在 chrome 和 ff 中一切正常（我的父母应该扩大到适合父母）

重要！

我需要一个灵活的解决方案，我的代码在正文和内容 div 之间可以有很多嵌套的 div（不是常量值）。

例如：

<body>
  <div>
    <div>
      <div class="container">
        <div class="container-item container-item-1"></div>
        <div class="container-item container-item-2"></div>
        <div class="container-item container-item-3"></div>
      </div>
    </div>
  </div>
</body>

或

<body>
  <div>
    <h3>text</h3>
      <div class="container">
        <div class="container-item container-item-1"></div>
        <div class="container-item container-item-2"></div>
        <div class="container-item container-item-3"></div>
      </div>
  </div>
</body>

【问题讨论】：

Support is really bad on IE11
@Randy 是的，我知道 :)\
这是 IE 的 flexbox 错误之一...检查欺骗并这样做：jsfiddle.net/h70n2o17
@LGSon 解决方案不灵活，我可以有多个父母，在 body 之前 -> 不起作用
@LGSon 我会的。在周末。谢谢。

标签： css flexbox internet-explorer-11

【解决方案1】：

如果您在 container 之前有一个未知或嵌套的标记，您可以在其中添加一个额外的包装器（此处为 inner），以克服 IE 的 min-height 错误。

Fiddle sample 1 -- Fiddle sample 2

堆栈 sn-p 示例 1

html, body {
  margin: 0;
}

.container {
  display: flex;
}

.container .inner {
  width: 100%;
  min-height: calc(100vh - 100px);
  margin: 30px;
  padding: 20px;
  border: 1px solid gray;
  border-radius: 16px;
  display: flex;
  flex-direction: column;
}

.container-item {
  flex-grow: 1;
  border: 1px solid #cecece;
}

.container-item-1 {
  background-color: red;
}

.container-item-2 {
  background-color: orange;
}

.container-item-3 {
  background-color: green;
}

<div>
  <h3>text</h3>
  <div class="container">
    <div class="inner">
      <div class="container-item container-item-1">
      </div>
      <div class="container-item container-item-2">
      </div>
      <div class="container-item container-item-3">
      </div>
    </div>
  </div>
</div>

堆栈 sn-p 示例 2

html, body {
  margin: 0;
}

.container {
  display: flex;
}

.container .inner {
  width: 100%;
  min-height: calc(100vh - 100px);
  margin: 30px;
  padding: 20px;
  border: 1px solid gray;
  border-radius: 16px;
  display: flex;
  flex-direction: column;
}

.container-item {
  flex-grow: 1;
  border: 1px solid #cecece;
}

.container-item-1 {
  background-color: red;
}

.container-item-2 {
  background-color: orange;
}

.container-item-3 {
  background-color: green;
}

<div>
  <div>
    <div class="container">
      <div class="inner">
        <div class="container-item container-item-1">
        </div>
        <div class="container-item container-item-2">
        </div>
        <div class="container-item container-item-3">
        </div>
      </div>
    </div>
  </div>
</div>

【讨论】：