Positioning child at bottom of parent with scroll

Question

I would like to position a child div at the very bottom of its parent. Normally, I understand this could be done using position: absolute; bottom: 0; - However, this places the child to the bottom of the screen in view, but my page has overflow-y, as height: 1000px; (i.e. the content scrolls below), and it is this which I want the parent to be positioned at the bottom of (so that it is visible only when you scroll down to the very bottom).

Here is a very simple example of my problem on codepen.

http://codepen.io/anon/pen/qdmowK

Answer 1

You need to position the element in relation to the parent

In your case this means applying position: relative; to the parent.

#center {
  flex: 3;
  background-color: pink;
  position: relative;
}

#child {
  outline: 5px solid yellow;
  position: absolute;
  bottom: 0;
}

Codepen Demo

Answer 2

http://codepen.io/anon/pen/wadjvK

#header {
  width: 100%;
  height: 200px;
  background-color: red;
}

#content {
  display: flex;
}

#left {
  height: 1000px; /*Sets height for #center, #right*/
  flex: 1;
  background-color: blue;
}


#center {
  flex: 3;
  background-color: pink;
   position:relative;
}

#child {
  outline: 5px solid yellow;
position:absolute;
    bottom:0;
}

#right{
  flex: 1;
  background-color: green;
}