title: Flex works in chrome but not in IE
body: <p><a href="https://i.stack.imgur.com/SSsvQ.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/SSsvQ.png" alt="Background Red is not growing completely as per screen size"></a></p>
  
  <p>the html structure of the code is as shown below. Now I have given background:red to timeline className ( to check if the child gets shrink or grow when minimizing and maximizing the window size). 
  timeline is parent for cluster, eventitem, today, todatedate.</p>
  
  <p>When I try to minimize and maximize by rescaling the window size, in chrome it works well but in IE it is broken.</p>
  
  <p>I am not sure where i am going wrong. Seems timeline is not flex grow:1. </p>
  
  <p><a href="https://i.stack.imgur.com/u0m1h.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/u0m1h.png" alt="Works well in chrome"></a>
  code structure</p>
  
  <pre><code>&lt;div class="data"&gt;
      &lt;div class="dataselect__main "&gt; 
          &lt;div class="dataselect__content" &gt;
          &lt;div class="logic_scrollbararea"&gt;
              &lt;div class="timeline"&gt;
                  ::before
                  &lt;div class="data__moredata--buttoncontainer"&gt;
                      &lt;div class="data__moredata--button"&gt;
                      &lt;/div&gt;
                  &lt;/div&gt;
                  &lt;div class="timeline__item__cluster" &gt;&lt;/div&gt;
                  &lt;div class="timeline__item__eventItem" &gt;&lt;/div&gt;
                  &lt;div class="timeline__item__todayItem "&gt;&lt;/div&gt;
                  &lt;div class="timeline__item__todaydateItem "&gt;&lt;/div&gt;
                  &lt;div class="timeline__nodataavailable" &gt;&lt;/div&gt;
                  ::after
              &lt;/div&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>css</p>
  
  <pre><code>.dataselect__main{
      height: 100%;
      overflow: hidden;
      display:flex;
      flex:1;
  }
  .dataselect__content{
      overflow: hidden;
      position: absolute;
      left: 0;
      height: 100%;
      width: 100%;
      display:flex;
      flex:1;
      min-height:0;
      min-width:0;
  }
  .logic_scrollbararea{
      display: inherit;
      overflow: hidden;
      padding: 0px;
      position: absolute;
      top: 0px;
      bottom: 0px;
      left: 0px;
      right: 0px;
  }
  }
  .timeline {
      height: 100%;
      padding-top: 3.125rem;
      position: absolute;
      min-width: 100%;
      background:red;
   }
  .timeline:before {
      content: "";
      height: 0.375rem;
      border-radius: 0.3125rem;
      border: 0.125rem solid #1f1f1f;
      background-color: #2d6483;
      display: block;
      top: 3.125rem;
      left: 0;
      right: 0.25rem;
      margin-top: 0.4375rem;
  }
  .timeline:after {
      content: "";
      border-radius: 0.5rem;
      border: 0.125rem solid #1f1f1f;
      background: #389dd5;
      top: 3.125rem;
      right: 0;
      margin-top: 0.25rem;
      width: 0.75rem;
      height: 0.75rem;
  }
  </code></pre>