height指定なしでdivボックスの高さを合わせる

コンテンツが可変でheightを固定に出来ないときにdivボックスの高さを合わせる方法。

HTML

<div class="box">
    <div class="container1">あいうえお</div>
    <div class="container2">かきくけこさしすせそたちつてとなにぬねの</div>
</div>

padding-bottomで余白をもの凄く大きく指定して、margin-bottomを同じだけマイナスで指定する。
10000pxに特別な意味はなくて、内容が全部入る高さがあれば良い。
後は親のボックスにoverflow:hidden;を指定した溢れた分を非表示にすれば良い。

CSS

.box {
    overflow: hidden;
}
.container1 {
    background: #f00;
    float: left;
    overflow: wrap;
    width: 5em;
    padding-bottom: 10000px;
    margin-bottom: -10000px;
}
.container2 {
    background: #00f;
    float: left;
    overflow: wrap;
    width: 5em;
    padding-bottom: 10000px;
    margin-bottom: -10000px;
}

こんな感じに高さが揃う。

あいうえお

かきくけこさしすせそたちつてとなにぬねの