danwellman danwellman - 4 months ago 12
CSS Question

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

I have an outer container with

display: flex; flex-wrap: wrap;
on it, then inside this I have a series of boxes with
display: flex;
on them. This result in all of the boxes inside the container taking up the same height.

However, there are other elements inside each box, including a content area with a variable amount of text in it, and a footer area with a button in it.

I'd like to have the footer area aligned to the bottom of each box, regardless of how much text is inside the content area.

I've tried setting the content and footer areas to
display: flex
and setting
align-self: flex-end;
on the footer, but not only does this not fix the footer to the bottom of each box, it also breaks the layout of the elements inside the content area (there is a heading in each content area along with the text content).

The layout of each box is like this:

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


Is it possible with flex? Or is inner layout too complex?

Edit



The actual HTML structure is as 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 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>


Here is a pen with the code as it is now: https://codepen.io/danwellman/pen/akyzoA

Answer

Use flex-columns on your inner containers. Then apply margin-top:auto to the 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>

Comments