[解決済み] Divを下から上へ積み重ねる

質問

を追加する場合 div を div で高さが固定されている場合、子 div は上から下へ表示され、上の境界線に張り付くようになります。

┌─────────────────────────┐
│ Child Div 1             │
│ Child Div 2             │
│                         │
│                         │
│                         │
└─────────────────────────┘

今はこんな感じで下から上に表示させようとしています（下の枠線に張り付いています）。

┌─────────────────────────┐
│                         │
│                         │
│                         │
│ Child Div 1             │
│ Child Div 2             │
└─────────────────────────┘
┌─────────────────────────┐
│                         │
│                         │
│ Child Div 1             │
│ Child Div 2             │
│ Child Div 3             │
└─────────────────────────┘
┌───────────────────────┬─┐
│ Child Div 2           │▲│
│ Child Div 3           │ │
│ Child Div 4           │ │
│ Child Div 5           │█│
│ Child Div 6           │▼│
└───────────────────────┴─┘

といった具合に...。言いたいことが伝わるといいのですが。

これは単純にCSSでできるのでしょうか（例えば vertical-align: bottom )? それとも、JavaScriptで何かをハックする必要があるのでしょうか？

どのように解決するのですか？

すべての回答は スクロールバー を見逃します。そしてそれは難しいことです。もし、モダンブラウザとIE 8+で動作させるだけなら、テーブルポジショニングを使うことができます。 vertical-align:bottom と max-height . 参照 MDN を参照してください。

デモ (垂直揃え)

.wrapper {
  display: table-cell;
  vertical-align: bottom;
  height: 200px;
}
.content {
  max-height: 200px;
  overflow: auto;
}

html

<div class="wrapper">
  <div class="content">
     <div>row 1</div>
     <div>row 2</div>
     <div>row 3</div>  
  </div>
</div>  

その他、CSSのみでは無理だと思います。要素をコンテナの底に張り付かせるのは position:absolute で、コンテナの底に張り付かせることはできますが、フローから外れてしまいます。結果的に伸縮しなくなり、コンテナがスクロールできるようになります。

デモ (位置-絶対)

.wrapper {
  position: relative;
  height: 200px;
}
.content {
  position: absolute;
  bottom: 0;
  width: 100%;
}