title: ie 11: flex grow parent issue
body: <p>I have such code:</p>
  
  <p><a href="https://plnkr.co/edit/ZAEzfAOCO0ZcSq2OR4Lp?p=preview" rel="nofollow noreferrer">https://plnkr.co/edit/ZAEzfAOCO0ZcSq2OR4Lp?p=preview</a></p>
  
  <p>but this isn't working in ie, until I add height:0 (it's a very bad idea on parent element)</p>
  
  <pre><code>  &lt;body&gt;
      &lt;div class="container"&gt;
        &lt;div class="container-item container-item-1"&gt;&lt;/div&gt;
        &lt;div class="container-item container-item-2"&gt;&lt;/div&gt;
        &lt;div class="container-item container-item-3"&gt;&lt;/div&gt;
      &lt;/div&gt;
    &lt;/body&gt;
  
  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;
  }
  </code></pre>
  
  <p>everything works fine in chrome and ff
  (my parents should expand to fit parent)</p>
  
  <p><strong>Important!</strong></p>
  
  <p>I need a flexible solution, my code can have a lot of nested div's (not a constant value) between body and content divs.</p>
  
  <p>for example:</p>
  
  <pre><code>&lt;body&gt;
    &lt;div&gt;
      &lt;div&gt;
        &lt;div class="container"&gt;
          &lt;div class="container-item container-item-1"&gt;&lt;/div&gt;
          &lt;div class="container-item container-item-2"&gt;&lt;/div&gt;
          &lt;div class="container-item container-item-3"&gt;&lt;/div&gt;
        &lt;/div&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  &lt;/body&gt;
  </code></pre>
  
  <p>or </p>
  
  <pre><code>&lt;body&gt;
    &lt;div&gt;
      &lt;h3&gt;text&lt;/h3&gt;
        &lt;div class="container"&gt;
          &lt;div class="container-item container-item-1"&gt;&lt;/div&gt;
          &lt;div class="container-item container-item-2"&gt;&lt;/div&gt;
          &lt;div class="container-item container-item-3"&gt;&lt;/div&gt;
        &lt;/div&gt;
    &lt;/div&gt;
  &lt;/body&gt;
  </code></pre>