title: why isn't my flexbox flex-stretch property working?
body: <p>I'm trying to get the three flex children boxes to stretch using flexbox to fill the container so that all three boxes are the same size. However, I don't want the first two inside boxes to stretch - I always want them to be the same size. Kind of hard to explain, so here's what I want it to look like this: <img src="https://i.stack.imgur.com/okzr4.png" alt="enter image description here"> </p>
  
  <p>Where the red boxes are all equal and fixed height as each other, same with the blue boxes (height relationship between red and blue boxes not important), and the green box is the one that stretches to however big the biggest black box is. So I want to avoid something like this, for example:</p>
  
  <p><img src="https://i.stack.imgur.com/CbJ6r.png" alt="enter image description here"></p>
  
  <p>Here's a JSFiddle: <a href="http://jsfiddle.net/agentemi1y/ssxu5moy/" rel="noreferrer">http://jsfiddle.net/agentemi1y/ssxu5moy/</a></p>
  
  <p>Here's the basic html:</p>
  
  <pre><code>&lt;div class="container"&gt;
  &lt;div class="box box1"&gt;
      &lt;div class="inside-box"&gt;&lt;/div&gt;
      &lt;div class="inside-box"&gt;&lt;/div&gt;
      &lt;div class="inside-box last-box"&gt;&lt;/div&gt;
  &lt;/div&gt;
  &lt;div class="box box2"&gt;
      &lt;div class="inside-box"&gt;&lt;/div&gt;
      &lt;div class="inside-box"&gt;&lt;/div&gt;
      &lt;div class="inside-box last-box"&gt;&lt;/div&gt;
  &lt;/div&gt;
  &lt;div class="box box3"&gt;
      &lt;div class="inside-box"&gt;&lt;/div&gt;
      &lt;div class="inside-box"&gt;&lt;/div&gt;
      &lt;div class="inside-box last-box"&gt;&lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p></p>
  
  <pre><code>.container {
  border: 1px solid red;
  width:90%;
  height: 100px;
  display:flex;
  justify-content: center;
  align-items: center;
  align-content: stretch;
  }
  
  .box {
      border: 1px solid purple;
      flex: 0 1 33%;
      margin: 0 20px;
      align-self: stretch;
      display:flex;
      flex-direction: row;
      flex-wrap: wrap;
      align-content: flex-start;
  }
  
  .inside-box {
      border: 1px solid green;
      min-height: 0.5rem;
      flex: 0 1 100%;
      align-self: flex-start;
  }
  
  .last-box {
      background-color: pink;
      align-self: stretch;
  }
  </code></pre>
  
  <p><strong>NOTE:</strong> I can't set a fixed height for the three black boxes, because then if all three boxes only have one icon in them, it'll look dumb.</p>