css - Bootstrap 3 - ボタンの高さの一致パネル (CSS3)

Question

編集 この投稿につまずいた方のために、Flexbox と呼ばれる「新しい」標準があることを発見しました。これにより、私がやりたいことを実行できます:フレックスボックスのデモ

私は次の効果を得ようとしています：

しかし、私はこれを取得します：

jsFiddle を参照してください: http://jsfiddle.net/abehnaz/8sPn7/3/

height: 100%CSSで試してみましたが、うまくいきませんでした。これは、ボタンのスタイルが高さの設定よりも優先されるか、パネルがコンテンツ (この場合は画像) に基づいて動的な高さを取得するという事実に関係している可能性があると思います。

ボタンの高さをパネルの高さと一致させるためのクロスブラウザ/純粋なCSSの方法はありますか(適切なパディングとコンテンツのフィッティングを使用して?)

ありがとう！

HTML:

<div class="panel panel-default">
<div class="panel-body">
    <div class="media">
        <div class="media-object pull-left">
            <button class="btn btn-info option-button">A</button>
            <img src="holder.js/200x100" />
        </div>
        <div class="media-body">
            Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis 
        </div>
    </div>
</div>

CSS:

.option-button {
    height:100%;
}

**編集:** 許容できる解決策を得るために、メディア オブジェクトでボタンを使用することになりました。高さ全体に自動的に収まるわけではありませんが、機能します。.btn-lgクラスの適用に役立ちました。