css - `align-content: flex-end` does not seem to work for nested containers -

i have outer container display: flex; flex-wrap: wrap; on it, inside have series of boxes display: flex; on them. results in of boxes inside container taking same height.

however, there other elements inside each box, including content area variable amount of text in it, , footer area button in it.

i'd have footer area aligned bottom of each box, regardless of how text inside content area.

i've tried setting content , footer areas display: flex , setting align-self: flex-end; on footer, not not fix footer bottom of each box, breaks layout of elements inside content area (there heading in each content area along text content).

the layout of each box this:

---------------------------------------------------- | 'box' display: flex;                        | |                                                  | | ------------------------------------------------ | | | inner-container                              | | | |                                              | | | | -------------------------------------------  | | | | | content-area, h2 , variable      |  | | | | | number of p tags/imgs                   |  | | | | |                                         |  | | | | -------------------------------------------  | | | | -------------------------------------------  | | | | | footer area                             |  | | | | | (this on boxes,     |  | | | | | depending on content in content area)   |  | | | | -------------------------------------------  | | | |                                              | | | |                                              | | | | -------------------------------------------- | | | | | want footer in       | | | | | | boxes, regardless of content area height | | | | | -------------------------------------------- | | | ------------------------------------------------ | ---------------------------------------------------- 

is possible flex? or inner layout complex?

edit

the actual html structure follows:

<div class="equal-height-container"><!-- has display: flex; flex-wrap: wrap -->     <article class="equal-height-column"><!-- has display: flex -->         <div class="inner-container">             <div class="content-area">                 <h2>lorem ipsum</h2>                 <p><img style="float: right;" src="fake/path.png">lorem ipsum dolor sit amet, consectetur adipiscing elit, sed eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>                 <p>ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>                 <p>morbi sodales congue erat, ac ultricies enim venenatis eget. ut lacus ex, malesuada eget nibh eget, tristique aliquet nibh. suspendisse quis mattis quam. cras sit amet nunc lacinia, malesuada ex et, aliquet velit. etiam quis mauris in nunc ultricies elementum id vitae dolor.</p>             </div>             <div class="footer-area">                 <a href="#" class="btn">something</a>             </div>         </div>     </article>     <article><!-- more of these 'boxes' --></article> </div> 

here pen code now: https://codepen.io/danwellman/pen/akyzoa

use flex-columns on inner containers. apply margin-top:auto footer.

.outer {    display: flex;    margin: auto;  }  .inner {    flex: 0 0 50%;    border: 1px solid grey;    display: flex;    flex-direction: column;  }  h1 {    background: lightgreen;  }  footer {    margin-top: auto;    text-align: center;    background: #c0ffee;  }

<div class="outer">    <div class="inner">      <h1>heading</h1>      <p>lorem ipsum dolor sit amet, consectetur adipisicing elit. odit ad magni, fugiat, voluptates alias voluptatibus esse quis doloribus nisi, inventore accusantium! nemo at, accusamus alias.</p>        <p>lorem ipsum dolor sit amet.</p>      <footer>        <p>footer</p>      </footer>    </div>      <div class="inner">      <h1>heading</h1>      <p>lorem ipsum dolor sit amet, consectetur adipisicing elit. sint, quibusdam.</p>      <footer>        <p>footer</footer>    </div>    <div class="inner">      </div>