How to align text to the bottom of a flex-basis item?

Question

I would like to align text on the .second paragraph to be bottom-aligned. I have to set margin-top: auto to align the whole element to the bottom, but the text still aligns to the top of that element, and I need a space above .second. flex-basis provides extra space and the min-height that I needed without having a fixed margin.

How to vertically align text inside a flex-basis item?

.column{
  display: flex;
  flex-direction: column;
}

h1{
  flex-basis: 70px;
}

.second{
  flex-basis: 80px;
  background-color: red;
  margin-top: auto;
}

<div class="column">
    <h1>Subscribe</h1>
    <p class="first">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Beatae velit qui natus iure quisquam consequatur debitis saepe sint ex at.</p>
    <p class="second"> eusmod tempor incididunt ut labore et dolore magna aliqua.</p>
</div>

https://stackoverflow.com/q/25311541/3597276 – Michael Benjamin Dec 12 '17 at 14:33 — Michael Benjamin, Dec 12 '17 at 14:33

score 3 · Answer 1 · answered Dec 12 '17 at 12:22

Make it also a flex container and use align-items: flex-end to push content to the bottom.

Stack snippet

.column{
  display: flex;
  flex-direction: column;
}

h1{
  flex-basis: 70px;
}

.second{
  flex-basis: 80px;
  background-color: red;
  margin-top: auto;

  display: flex;                    /*  added  */
  align-items: flex-end;            /*  added  */
}

<div class="column">
    <h1>Subscribe</h1>
    <p class="first">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Beatae velit qui natus iure quisquam consequatur debitis saepe sint ex at.</p>
    <p class="second"> eusmod tempor incididunt ut labore et dolore magna aliqua.</p>
</div>

VXp · Accepted Answer · 2018-09-06T13:37:38.257

Give display: flex and align-items: flex-end to the .second div:

.column {
  display: flex;
  flex-direction: column;
}

h1 {
  flex-basis: 70px;
}

.second {
  display: flex;
  align-items: flex-end;
  flex-basis: 80px;
  background-color: red;
  margin-top: auto;
}

<div class="column">
  <h1>Subscribe</h1>
  <p class="first">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Beatae velit qui natus iure quisquam consequatur debitis saepe sint ex at.</p>
  <p class="second"> eusmod tempor incididunt ut labore et dolore magna aliqua.</p>
</div>

How to align text to the bottom of a flex-basis item?

2 Answers2