Q:

Box model of Block element within another block element

For the box model of a block element within another block element of fixed dimensions, for example:
   <div style="height: 200px; width:200px;">
    <figure></figure>
   </div>

do the inner block-level element's dimensions (eg: <figure>) have to fit in the outer one's dimensions (eg: <div>) - i.e: less than? and if not, how can we force them to do so?

A:

You can do it by setting the child element dimesions to 100%.
div>figure {
 width: 100%;
 height: 100%;
}

To prevent child img tags from getting distorted you should set the img tag's height to auto and max-width to 100%.
div>figure>img {
 max-width: 100%;
 height: auto;
 display: block;
}

