title: How to get an absolutely positioned item inside a relatively positioned flexbox container to grow?
body: <p>Here's a jsfiddle: <a href="https://jsfiddle.net/wwucLo3c/" rel="nofollow">https://jsfiddle.net/wwucLo3c/</a> I need the red div to be full width when there is no cyan div. And if there is they both have to be 50%. </p>
  
  <p>Here's the container's CSS:</p>
  
  <pre><code>.container{
      position:relative;
      width:100%;
      height:100%;
      background:blue;
  
      display:flex;
      flex-direction:row;
      align-content:stretch;
  }
  </code></pre>
  
  <p>And the item's:</p>
  
  <pre><code>.item{
      position:absolute;
      top:10%;
      flex:1 1 1;
      min-width:50%;
      height:10%;
  }
  </code></pre>
  
  <p>Basically, i need an absolutely positioned item to grow if there is no other item at it's width and shrink if there is. Is it even possible? It seems like i tried every flexbox setting and nothing helped.</p>