Vertically aligning content inside flexbox

Question

In our web application I'm trying to vertically aligning the content inside flexboxes. What I want is to anchor content to the bottom (left) corner of a parent div, so that the content grows upwards instead of down.

Example image.

More specifically, what I'm trying to achieve is this: I have a column of n elements, evenly spaced out using flexbox. These elements all have a toolbar that is activated on hover. This toolbar is supposed to be anchored to the bottom of the element. Problem is, the height of the element is not given, and overflows its container as expected. But it severely complicates the placement of the toolbar. I do not want to stretch the elements, their maximum height should be the height of its content (something that rules out all the position: absolute hacks and solutions I've tried up until now).

I envision that the simplest solution would be to anchor the element to the bottom left corner of the flexing element, and have it grow upwards. This way it is trivial to anchor the toolbar to the bottom, and better supports variable heights and number of elements. I can not figure out how to do it, or even if it is possible at all.

Code example

Here I want the content text to be at the bottom left of the element, and the element box to grow (and overflow) upwards instead of down. Remove the overflow: hidden to see what I mean by growing/overflowing downwards.

Answer 1

you need justify-content:flex-end and imbricate 2 flex levels to trigger justify-content within childs.

DEMO with 2 p in body as container.

---

Base CSS

body {/* used as a box for demo, size it */
  width:600px;
  height:250px;
  margin:auto;
  display:flex;
}
p {
  border:solid;
  display:flex;
  flex-direction:column;/* vertical! */
  padding:5px;
}
p+p {
  justify-content: flex-end;/* drop down content */
}

---

to see content overflowing at the top you must go against the natural flow, so,

you need to set content in absolute position within a relative parent :

DEMO

---

HTML same as above + text wrapped in span for second paragraph.

body {
  width:600px;
  height:150px;
  margin:auto;
  display:flex;
}
p {
  border:solid;
  padding:5px;
  margin:1em;
  width:300px;
  position:relative;
}
p + p span  {
 display:block;
  position:absolute;
  bottom:0;
  width:100%
}