CSS空白:nowrap使容器展开以容纳所有文本

Question

我遇到了一个非常奇怪的行为，其中具有overflow: hidden、white-space: nowrap和width: 50%的元素强制其包含元素展开以适应所有文本，即使它受到宽度声明的约束(实际上不可见)。在容器上设置特定的宽度或使用overflow: hidden也没有任何帮助。然而，将绝对值设置为有问题的元素的宽度可以解决问题，但我不想使用绝对值。

示例：http://jsbin.com/loxuz/3(黄色框应该只有灰色框的50%，但正在扩展以适应蓝色框中的所有文本，即使宽度受到限制。)

有人看到这里有什么明显的问题吗？包含的元素应该有宽度吗？这与我使用百分比的事实有什么关系吗？我觉得不可能是这样，因为宽度应该从容器向上继承，对吧？而不是从文本元素向下口述。我能找到的唯一解释是white-space: nowrap导致了这种情况。删除它可以使容器具有合适的宽度，但也会导致文本换行，这是我不想要的。

有人知道这个问题的解决方案吗，或者有什么见解吗？：)

Answer 1

对于字段集不符合指定宽度的问题，一个快速的解决方法是向元素添加一个min-width: 0：

即

fieldset {
min-width: 0;
}

Answer 2

这就是您想要的吗演示：http://jsbin.com/tifefase/1/。您应该从span中删除max-width: 50%，并为#seconddiv写入width: 50%。如果您想使用fieldset，这就是您要寻找的答案。

#second {
width:50%; 
border:yellow 1px solid;
}
span {
overflow:hidden;
white-space:nowrap;
outline:blue 1px solid;
display:block;
}

但是，如果使用div而不是字段集，则可以继续使用当前值查看新演示使用div而不是fieldset。

#second {
width:50%; 
}
#third {
width:100%; 
border:yellow 1px solid;
}