Como posso enviar um <div> interno para a parte inferior do <div> pai?

A div dentro de outra imagem e código div abaixo. Porque haverá texto e imagens da div pai. E div vermelho será o último elemento da div pai.

<div style="width: 200px; height: 150px; border: 1px solid black;">
    <div style="width: 100%; height: 50px; border: 1px solid red;">
    </div>
</div>

Esta é uma maneira

<div style="position: relative; 
            width: 200px; 
            height: 150px; 
            border: 1px solid black;">

    <div style="position: absolute; 
                bottom: 0; 
                width: 100%; 
                height: 50px; 
                border: 1px solid red;">
    </div>
</div>

Mas como a div interna está posicionada absolutamente, você sempre terá que se preocupar com outro conteúdo na div externa sobrepondo-a (e sempre terá que definir alturas fixas).

Se você puder fazer isso, é melhor tornar essa div interna o último objeto DOM na sua div externa e configurá-la para "clear: both".

Uma maneira flexbox.

HTML:

<div class="parent">
  <div>Images, text, buttons oh my!</div>
  <div>Bottom</div>
</div>

CSS:

.parent {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

/*  not necessary, just to visualize it */

.parent {
  height: 500px;
  border: 1px solid black;
}


.parent div {
  border: 1px solid red;
}

Editar:

Fonte - Guia Flexbox

Suporte do navegador para flexbox - Caniuse

Faça a div externa position="relative"e a div interna position="absolute"e defina-a bottom="0".

Aqui está outro truque puro de CSS, que não afeta o fluxo de elementos.

#parent {
  min-height: 100vh; /* set height as you need */
  display: flex;
  flex-direction: column;
  background: grey;
}
.child {
  margin-top: auto;
  background: green;
}

<div id="parent">
  <h1>Positioning with margin</h1>
  <div class="child">
    Content to the bottom
  </div>
</div>

Você pode não querer um posicionamento absoluto porque interrompe o reflow: em algumas circunstâncias, uma solução melhor é criar o elemento avô display:table;e o elemento pai display:table-cell;vertical-align:bottom;. Depois de fazer isso, você poderá fornecer os elementos filhos display:inline-block;e eles fluirão automaticamente para a parte inferior do pai.

Nota: Esta não é a melhor maneira possível de fazê-lo!

Situação : eu tinha que fazer o mesmo, só que não era possível adicionar divs extras; portanto, fiquei preso ao que tinha e, em vez de remover o innerHTML e criar outro via javascript quase como 2 renderizações, precisava ter o conteúdo no diretório inferior (barra animada).

Solução: Dado o quão cansado eu estava no momento, parece normal pensar em um método desse tipo, no entanto, eu sabia que tinha um elemento DOM pai do qual a altura da barra estava começando.

Em vez de mexer com o javascript, usei uma resposta CSS ( NÃO SEMPRE BOA IDÉIA )! :)

-moz-transform:rotate(180deg);
-webkit-transform:rotate(180deg);
-ms-transform:rotate(180deg);

Sim, está correto. Em vez de posicionar o DOM, virei o pai de cabeça para baixo em css.

Para o meu cenário, vai funcionar! Possivelmente para outros também! Nenhuma chama! :)

Aqui está uma maneira de evitar divs e tabelas absolutas se você souber a altura dos pais:

<div class="parent">
    <div class="child"> <a href="#">Home</a>
    </div>
</div>

CSS:

.parent {
    line-height:80px;
    border: 1px solid black;
}
.child {
    line-height:normal;
    display: inline-block;
    vertical-align:bottom;
    border: 1px solid red;
}

JsFiddle:

Exemplo

<div style="width: 200px; height: 150px; border: 1px solid black;position:relative">
    <div style="width: 100%; height: 50px; border: 1px solid red;position:absolute;bottom:0">
    </div>
</div>