`align-content：flex-end`似乎不适用于嵌套容器

Question

我有一个外部容器，其上有display: flex; flex-wrap: wrap;，然后在里面我有一系列带有display: flex;的盒子。这导致容器内的所有盒子占据相同的高度。

但是，每个盒子里面还有其他元素，包括内容区域，其中包含可变数量的文本，以及包含按钮的页脚区域。

我希望脚注区域与每个框的底部对齐，而不管内容区域内有多少文本。

我试过在页脚上设置内容和页脚区域为display: flex并设置align-self: flex-end;，但这不但不会将页脚固定到每个框的底部，还会打破内容中元素的布局区域（每个内容区域都有一个标题以及文本内容）。

每个框的布局是这样的：

---------------------------------------------------- 
| 'box' with display: flex;      | 
|             | 
| ------------------------------------------------ | 
| | inner-container        | | 
| |            | | 
| | ------------------------------------------- | | 
| | | content-area, with h2 and variable  | | | 
| | | number of p tags/imgs     | | | 
| | |           | | | 
| | ------------------------------------------- | | 
| | ------------------------------------------- | | 
| | | footer area        | | | 
| | | (this is where it is on some boxes,  | | | 
| | | depending on content in content area) | | | 
| | ------------------------------------------- | | 
| |            | | 
| |            | | 
| | -------------------------------------------- | | 
| | | This is where I want footer in all  | | | 
| | | boxes, regardless of content area height | | | 
| | -------------------------------------------- | | 
| ------------------------------------------------ | 
---------------------------------------------------- 

是否可以使用Flex？或者内部布局太复杂？

编辑

实际的HTML结构如下：

<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 do 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> 

这里是代码中的笔，因为它现在是：https://codepen.io/danwellman/pen/akyzoA

Answer 1

使用Flex-列在你的内部容器。然后将margin-top:auto应用于页脚。

.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>