考虑以下代码：
HTML：
<div>
<img src="http://placehold.it/600x150" />
</div>
CSS：
div { max-width: 200px }
img { max-width: 100% }
图像的宽度永远不会超过 200 像素，无论其原始尺寸如何。到目前为止，一切都很好。
这是小提琴：http: //jsfiddle.net/PeAAb/
但是，如果父元素display设置为table：
div { max-width: 200px; display: table }
图像神奇地扩展到其原始宽度，并table随之扩展。
这是小提琴：http: //jsfiddle.net/PeAAb/1/
实际表也会发生同样的情况：http: //jsfiddle.net/PeAAb/2/
问题：这是预期的行为吗？如果是这样，可以做些什么来解决这个问题？
设置父width级（甚至是基于百分比的宽度）而不是max-width正确地将图像压缩回其框中，但这不是解决方案。我需要父级是流畅的（我将它用于网站的主要结构，以便我可以让侧边栏 HTML 出现在源中的主要内容之后，但侧边栏的宽度是固定的）。
此外，设置table-layout为fixed似乎在这里没有效果。