Html 内联块子项自动宽度奇怪的行为

考虑以下标记和CSS：

.parent{
位置：相对位置；
浮动：对；
宽度：400px；
高度：35px；
填充：0.4px；
利润率：7px 20px；
边框：1px实心#aaa；
边界半径：5px；
光标：文本；
空白：nowrap；
溢出-x：自动；
溢出y：隐藏；
}
.孩子{
显示：内联块；
身高：100%；
最小宽度：1px；
垂直对齐：顶部；
背景色：rgba（255,0,0,0.5）；
}
.次子{
显示：内联表；
高度：计算（100%-8px）；
背景色：#ddd；
线高：27px；
字号：0.9em；
填充：0 7px；
利润率：4×4×4×0；
边界半径：25px；
}
.子代跨度{
显示：表格单元格；
垂直对齐：中间对齐；
}
.sub-child.img{
宽度：20px；
背景颜色：蓝色；
}
.sub-child.name{
填充：0 7px；
最大宽度：100px；
文本溢出：省略号；
溢出：隐藏；
空白：nowrap；
}
.sub-child.closebtn{
位置：相对位置；
顶部：-1px；
颜色：#525353；
字体大小：粗体；
字体大小：20px；
光标：指针；
}
.sub-child.closebtn:之前{
内容：“\00d7”；
}
.sub-child.closebtn:悬停{
颜色：#000；
}
.其他儿童{
显示：内联块；
身高：100%；
宽度：100px；
背景色：rgba（0,0,0,0.5）；
}

测试客户端
比格尔布
破烂的
希格·威格尔·米格尔森

我通过从

.img

表格单元格元素中删除固定宽度，并插入一个具有固定宽度的子元素来解决这个问题。但我仍然不确定为什么为表格单元格指定固定宽度会破坏

.child

元素的自动宽度

.parent{
位置：相对位置；
浮动：对；
宽度：400px；
高度：35px；
填充：0.4px；
利润率：7px 20px；
边框：1px实心#aaa；
边界半径：5px；
光标：文本；
空白：nowrap；
溢出-x：自动；
溢出y：隐藏；
}
.孩子{
显示：内联块；
身高：100%；
最小宽度：1px；
垂直对齐：顶部；
背景色：rgba（255,0,0,0.5）；
}
.次子{
显示：内联表；
高度：计算（100%-8px）；
背景色：#ddd；
线高：27px；
字号：0.9em；
填充：0 7px；
利润率：4×4×4×0；
边界半径：25px；
}
.子代跨度{
显示：表格单元格；
垂直对齐：中间对齐；
}
.sub-child.img：之前{
内容：“；
宽度：20px；
身高：100%；
背景颜色：蓝色；
}
.sub-child.name{
填充：0 7px；
最大宽度：100px；
文本溢出：省略号；
溢出：隐藏；
空白：nowrap；
}
.sub-child.closebtn{
位置：相对位置；
顶部：-1px；
颜色：#525353；
字体大小：粗体；
字体大小：20px；
光标：指针；
}
.sub-child.closebtn:之前{
内容：“\00d7”；
}
.sub-child.closebtn:悬停{
颜色：#000；
}
.其他儿童{
显示：内联块；
身高：100%；
宽度：100px；
背景色：rgba（0,0,0,0.5）；
}

测试客户端
比格尔布
破烂的
希格·威格尔·米格尔森