title: Positioning a div underneath a (align-item) stretched div
body: <p>I want to position a div below multiple flex-items using align-item: stretch; to make all the items the same height. And then no matter behind which div I place the new div it will be below the stretched height of the above div.</p>
  
  <p>Current result
  <a href="https://i.stack.imgur.com/se9p8.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/se9p8.png" alt="enter image description here"></a></p>
  
  <p>This is the current HTML</p>
  
  <pre><code>&lt;ul class="flex-container stretch"&gt;
         &lt;li class="flex-item"&gt;&lt;img src="1.png" /&gt;
               &lt;div class="info"&gt;
                      &lt;div class="detail"&gt;
                             &lt;div class="image"&gt;
                                          &lt;img src="camera.png"/&gt;
                             &lt;/div&gt;
                      &lt;/div&gt;
                      &lt;div class="detail"&gt;
                             &lt;div class="image"&gt;
                                          &lt;img src="camera.png"/&gt;
                             &lt;/div&gt;
                      &lt;/div&gt;
                      &lt;div class="detail"&gt;
                             &lt;div class="image"&gt;
                                          &lt;img src="camera.png"/&gt;
                             &lt;/div&gt;
                      &lt;/div&gt;
                      &lt;div class="detail"&gt;
                             &lt;div class="image"&gt;
                                          &lt;img src="camera.png"/&gt;
                             &lt;/div&gt;
                      &lt;/div&gt;
               &lt;/div&gt;
         &lt;/li&gt;
         &lt;li class="flex-item"&gt;&lt;img src="2.png" /&gt;&lt;/li&gt;
         &lt;li class="flex-item"&gt;&lt;img src="1.png" /&gt;&lt;/li&gt;
         &lt;li class="flex-item"&gt;&lt;img src="2.png" /&gt;&lt;/li&gt;
  &lt;/ul&gt;
  </code></pre>
  
  <p>This is the current CSS i would like to also be able to wrap the images. And make the whole thing responsive.</p>
  
  <pre><code>.flex-container {
  padding: 0;
  margin: 0;
  list-style: none;
         -ms-box-orient: horizontal;
         display: -webkit-box;
         display: -moz-box;
         display: -ms-flexbox;
         display: -moz-flex;
         display: -webkit-flex;
         display: flex;
         float: left;
         flex-wrap: wrap;
  }
  .stretch { 
  -webkit-align-items: stretch; 
         align-items: stretch; 
  }
  .flex-item{
         width: 23%;
         margin: 0 1%;
         background: orange;
  }
  .flex-item img{
  width: 100%;
  }
  .info{
         padding:35px 0;
         width:100%;
         float:left;
         left:0;
         text-align:center;
         display:none;
         position:absolute;
         z-index:999;
         background: #fff;
  }
  .info .detail{
         width:25%;
         float:left;
  }
  
  .info image{
         width:65%;
  }
  </code></pre>
  
  <p>Expected result</p>
  
  <p><a href="https://i.stack.imgur.com/O1SUJ.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/O1SUJ.png" alt="enter image description here"></a></p>
  
  <p>Thanks.</p>