DIVCSS: DIV溢出导致DIV中的表格列宽width无效？

考虑以下HTML：两个<div>，都限制了宽度，各自有一个 <table>。

<div style="width: 20em; overflow: auto; padding: 2em 0px;">
<table style="border: 1px solid gray; border-collapse: collapse;"><tbody><tr>
	<td style="width: 8em; border: 1px solid;">8em</td>
	<td>1234567890987654321abcdefghijklmnopqrstuvwxyz</td>
</tr></tbody></table>
</div>

<div style="width: 20em; overflow: auto; padding: 2em 0px;">
<table style="border: 1px solid gray; border-collapse: collapse;"><tbody><tr>
	<td style="width: 8em;border: 1px solid;">8em</td>
	<td>1234567890</td>
</tr></tbody></table>
</div>

两个 table 中都明确设定了第1列的宽度，不同的是，第1个表格因为第2列内容过宽，从而导致父div溢出。
显示如下，问题出现了：为什么父div溢出之后，同样宽度的第1列的宽度在第1个table中为什么无效了？

具体原因尚不清楚，但我马上就想到一个办法，限制最小宽度：

第1列td {
	width: 8em;
	min-width: 8em;
}

这样确实生效了，但现目前依然不明白是为何。