css - inline-block 要素内の子の幅を制限するにはどうすればよいですか?

Question

inline-block要素内の子の幅を制限するにはどうすればよいですか?

最新のブラウザーをターゲットにしているとします。

を使用して表示される要素が与えられた場合inline-block、親の魔女を超えて拡大縮小しないように子要素を制限するにはどうすればよいですか。

実際には、任意の幅の画像を取得し、キャプションを親コンテナーの幅に制限するシステムを構築しようとしています。

• 幅を指定しなくても
• jQuery やその他の DOM 操作を使用せずに

CSS

<style>
div {
    width:800px;
    background-color:silver;
    text-align: center;
}
figure {
    display:inline-block;
    background-color: orange;
    padding: 1em;
    margin: 0;
}
figcaption {
    background-color:pink;
}
</style>

HTML

<div>
    <figure>
        <img src="http://i.techrepublic.com.com/blogs/11062012figure_a.gif" />
        <figcaption>
            Lorem ipsum dolor sit amet, consectetur adipisicing elit.
        </figcaption>
    </figure>
</div>