ie 11: flex grow parent issue

Question

I have such code:

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

but this isn't working in ie, until I add height:0 (it's a very bad idea on parent element)

  <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;
}

everything works fine in chrome and ff (my parents should expand to fit parent)

Important!

I need a flexible solution, my code can have a lot of nested div's (not a constant value) between body and content divs.

for example:

<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>

or

<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](http://caniuse.com/#feat=flexbox) — Randy, Sep 19 '17 at 13:07
This is one of IE's flexbox bugs ... check the dupe and do like this: https://jsfiddle.net/h70n2o17/ — Asons, Sep 19 '17 at 13:24
@LGSon solution isn't flexible, i can have multiple parents, before body -> won't work — brabertaser19, Sep 19 '17 at 13:29
@LGSon why you've marked as duplicate? it's not flexible, i cannot add display:flex everywhere — brabertaser19, Sep 19 '17 at 13:35
I reopened your question and posted an answer. It still rely on the _min-height bug fix_, though I made it within the `container` instead...it most likely is a duplicate anyway but now I can't close it again :) — Asons, Sep 19 '17 at 14:17
Please review and comment on my answer, and let me know if something is unclear or missing. If not, then it would be great if you could accept the answer it. — Asons, Sep 22 '17 at 07:00
@LGSon yes, checked. It's a way to handle only this code... if i have one more outer div - everything is crashing. I need a flexible solution... but ok, will accept. — brabertaser19, Nov 02 '17 at 07:04
If you show me i.e. a fiddle with the crashing version, I might be able to help. — Asons, Nov 02 '17 at 07:05

Asons · Accepted Answer · 2017-09-19T14:09:48.280

If you have an unknown or nested markup before the container, you could add an extra wrapper within it (here inner), to overcome IE's min-height bug.

Fiddle sample 1 -- Fiddle sample 2

Stack snippet sample 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>

Stack snippet sample 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>

ie 11: flex grow parent issue

1 Answers1