title: Flexbox margin-top: auto not pushing item to bottom
body: <p>I have want the UL to push to the bottom of the container for each item.  I have margin-top:auto set for the item but it is not working.  I have another demo that works but this is the one that I need to use.  Any help? </p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>.featured-products-carousel {
    display: flex;
    flex-wrap: nowrap;
    justify-content: space-between;
    margin: 0 auto;
    max-width: 1150px;
    width: 80%;
  }
  .featured-products-carousel .item {
    background-color: white;
    padding: 20px;
    align-items: stretch;
    display: flex;
    flex-direction: column;
    margin: 10px;
    padding: 0;
    flex: 1 1 auto;
    flex-wrap: wrap;
  }
  .featured-products-carousel .item h2 {
    text-align: center;
    padding: 8px 5px;
  }
  .featured-products-carousel .item .featured-product-description {
    margin-bottom: auto;
  }
  .featured-products-carousel .item .featured-products-links {
    margin-top: auto;
  }
  .featured-products-carousel .item ul {
    margin-top: auto;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/&gt;
  &lt;div class="featured-products-carousel" role="listbox"&gt;
  &lt;div class="item  active visible-md visible-sm visible-lg product-item col-xs-12 col-md-3 col-sm-6" id="2"&gt;
      &lt;span class="h2-span"&gt;
          &lt;h2 class="h2-height"&gt; [product-id] &amp;nbsp; &lt;/h2&gt;
      &lt;/span&gt;
          
          
          &lt;div class="product-image"&gt;
              &lt;a href="/products/[[product-id]]"&gt;
                      &lt;img src="http://placehold.it/400x250" alt="[item-description]" class="img-responsive-center"&gt;
                  
          &lt;/a&gt;
          &lt;/div&gt;
          &lt;p class="featured-product-description"&gt; Description Text. Lots and lots of great content about a particular part. Description Text. Lots and lots of great content about a particular part.&lt;/p&gt;
          
              &lt;ul class="list-unstyled"&gt;
                  &lt;li&gt;
                      &lt;a href="/products/[product-id]"&gt;
                      More About [product-id]&amp;nbsp;»
                      &lt;/a&gt;
                  &lt;/li&gt;
                  &lt;li&gt;
                      &lt;a href="[product-id].pdf"&gt;Datasheet&lt;/a&gt;
                  &lt;/li&gt;
              &lt;/ul&gt;
         
  &lt;/div&gt;
  &lt;div class="item  active visible-md visible-sm visible-lg product-item col-xs-12 col-md-3 col-sm-6" id="2"&gt;
      &lt;span class="h2-span"&gt;
          &lt;h2 class="h2-height"&gt; [product-id] &amp;nbsp; &lt;/h2&gt;
      &lt;/span&gt;
      
          
          &lt;div class="product-image"&gt;
              &lt;a href="/products/[[product-id]]"&gt;
                      &lt;img src="http://placehold.it/400x250" alt="[item-description]" class="img-responsive-center"&gt;
                  
          &lt;/a&gt;
          &lt;/div&gt;
          &lt;p class="featured-product-description"&gt; Description Text. Lots and lots of great content about a particular part. &lt;/p&gt;
          
              &lt;ul class="list-unstyled"&gt;
                  &lt;li&gt;
                      &lt;a href="/products/[product-id]"&gt;
                      More About [product-id]&amp;nbsp;»
                      &lt;/a&gt;
                  &lt;/li&gt;
                  &lt;li&gt;
                      &lt;a href="[product-id].pdf"&gt;Datasheet&lt;/a&gt;
                  &lt;/li&gt;
              &lt;/ul&gt;
          
      
  &lt;/div&gt;
  &lt;div class="item  active visible-md visible-sm visible-lg product-item col-xs-12 col-md-3 col-sm-6" id="2"&gt;
      &lt;span class="h2-span"&gt;
          &lt;h2 class="h2-height"&gt; [product-id] &amp;nbsp; &lt;/h2&gt;
      &lt;/span&gt;
      
          
          &lt;div class="product-image"&gt;
              &lt;a href="/products/[[product-id]]"&gt;
                      &lt;img src="http://placehold.it/400x250" alt="[item-description]" class="img-responsive-center"&gt;
                  
          &lt;/a&gt;
          &lt;/div&gt;
          &lt;p class="featured-product-description"&gt; Description Text. Lots and lots of great content about a particular part. Description Text. Lots and lots of great content about a particular part.&lt;/p&gt;
          
              &lt;ul class="list-unstyled"&gt;
                  &lt;li&gt;
                      &lt;a href="/products/[product-id]"&gt;
                      More About [product-id]&amp;nbsp;»
                      &lt;/a&gt;
                  &lt;/li&gt;
                  &lt;li&gt;
                      &lt;a href="[product-id].pdf"&gt;Datasheet&lt;/a&gt;
                  &lt;/li&gt;
              &lt;/ul&gt;
     
  &lt;/div&gt;
  &lt;div class="item  active visible-md visible-sm visible-lg product-item col-xs-12 col-md-3 col-sm-6" id="2"&gt;
      &lt;span class="h2-span"&gt;
          &lt;h2 class="h2-height"&gt; [product-id] &amp;nbsp; &lt;/h2&gt;
      &lt;/span&gt;
      
          
          &lt;div class="product-image"&gt;
              &lt;a href="/products/[[product-id]]"&gt;
                      &lt;img src="http://placehold.it/400x250" alt="[item-description]" class="img-responsive-center"&gt;
                  
          &lt;/a&gt;
          &lt;/div&gt;
          &lt;p class="featured-product-description"&gt; Description Text. Lots and lots of great content about a particular part. &lt;/p&gt;
          
              &lt;ul class="list-unstyled"&gt;
                  &lt;li&gt;
                      &lt;a href="/products/[product-id]"&gt;
                      More About [product-id]&amp;nbsp;»
                      &lt;/a&gt;
                  &lt;/li&gt;
                  &lt;li&gt;
                      &lt;a href="[product-id].pdf"&gt;Datasheet&lt;/a&gt;
                  &lt;/li&gt;
              &lt;/ul&gt;
          
      
  &lt;/div&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>