CSS 空白 : nowrap causes container to expand to fit all text

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;
}