问题
我有一个<select>它<option>的文本值很长的地方。我要<select>调整其大小，以使其永远不会比其父对象宽，即使它必须切断其显示的文本也是如此。max-width: 100%应该这样做。
调整大小之前：
调整大小后我想要什么：
但是，如果您加载此jsFiddle示例，并将“结果”面板的宽度调整为小于的宽度<select>，则可以看到内部的select <fieldset>无法缩小其宽度。
调整大小后，我实际上看到的是：
但是，用a <div>代替a<fieldset>的等效页面确实可以正确缩放。如果在一页上一个接一个，则可以看到并更轻松地测试更改。并且，如果删除周围的标签，则可以调整大小。该标签在某种程度上导致水平尺寸调整打破。<fieldset><div><fieldset><fieldset>
该<fieldset>行为是如果有一个CSS规则fieldset { min-width: min-content; }。（min-content手段，大致的最小宽度不会引起孩子溢出。）如果我更换<fieldset>了<div>与min-width: min-content，它看起来完全一样。但是min-content我的样式，浏览器默认样式表或Firebug的CSS Inspector中都没有规则。我试图覆盖<fieldset>Firebug的CSS检查器和Firefox的默认样式表forms.css中可见的所有样式，但这无济于事。专门覆盖min-width，width也没有执行任何操作。
码
字段集的HTML：
<fieldset>
<div class="wrapper">
<select id="section" name="section">
<option value="-1"></option>
<option value="1501" selected="selected">Sphinx of black quartz, judge my vow. The quick brown fox jumps over the lazy dog.</option>
<option value="1480">Subcontractor</option>
<option value="3181">Valley</option>
<option value="3180">Ventura</option>
<option value="3220">Very Newest Section</option>
<option value="1481">Visitor</option>
<option value="3200">N/A</option>
</select>
</div>
</fieldset>我的CSS应该可以运行，但不能运行：
fieldset {
/* hide fieldset-specific visual features: */
margin: 0;
padding: 0;
border: none;
}
select {
max-width: 100%;
}将width属性重置为默认值不会执行任何操作：
fieldset {
width: auto;
min-width: 0;
max-width: none;
}我尝试无法解决问题的其他CSS ：
/* try lots of things to fix the width, with no success: */
fieldset {
display: block;
min-width: 0;
max-width: 100%;
width: 100%;
text-overflow: clip;
}
div.wrapper {
width: 100%;
}
select {
overflow: hidden;
}更多细节
这个更全面，更复杂的jsFiddle示例也出现了问题，该示例与我实际上要修复的网页更加相似。从中可以看出，这<select>不是问题所在–内联块div也无法调整大小。尽管此示例更加复杂，但我认为上面简单案例的修复程序也将解决此复杂案例。
[编辑：请参阅下面的浏览器支持详细信息。]
关于此问题的一个令人奇怪的事情是，如果您设置div.wrapper { width: 50%; }，则<fieldset>停止点将在该点调整自身大小，然后原尺寸<select>会碰到视口的边缘。调整大小发生，因为如果<select>有width: 100%，即使<select>看起来有width: 50%。
如果您给出<select>本身width: 50%，则不会发生该行为。宽度只需正确设置即可。
我不明白这种差异的原因。但这可能不相关。
我还发现非常相似的问题HTML字段集允许孩子无限期扩展。提问者找不到解决方案，并猜测除了删除之外，没有解决方案<fieldset>。但是我想知道，如果真的不可能<fieldset>正确显示，那为什么呢？什么<fieldset>的规范或默认的CSS（如这一问题）导致这种行为？这种特殊行为可能在某个地方记录了下来，因为多个浏览器都是这样工作的。
背景目标和要求
我尝试执行此操作的原因是为具有较大形式的现有页面编写移动样式的一部分。表单有多个部分，其中一部分包裹在中<fieldset>。在智能手机上（或者如果您使浏览器窗口变小），带有的页面部分<fieldset>比表格的其余部分要宽得多。大多数形式都可以很好地限制其宽度，但是带有的部分<fieldset>则不能，因此迫使用户缩小或向右滚动以查看所有部分。
我不敢简单地删除<fieldset>，因为它是在大型应用程序的许多页面上生成的，而且我不确定CSS或JavaScript中的哪些选择器可能依赖于它。
如果需要，我可以使用JavaScript，JavaScript解决方案总比没有好。但是，如果JavaScript是实现此目标的唯一方法，那么我很想听到一个解释，说明为什么仅使用CSS和HTML无法做到这一点。
编辑：浏览器支持
在该站点上，我需要支持Internet Explorer 8和更高版本（我们刚刚放弃了对IE7的支持），最新的Firefox和最新的Chrome。此特定页面也应在iOS和Android智能手机上运行。Internet Explorer 8可以接受稍微降级但仍可用的行为。
我在不同的浏览器上重新测试了损坏的fieldset示例。它实际上已经可以在以下浏览器中运行：
- Internet Explorer 8、9和10
- 铬
- 适用于Android的Chrome
它在以下浏览器中中断：
- 火狐浏览器
- Android版Firefox
- Internet Explorer 7
因此，我关心的唯一破坏当前代码的浏览器是Firefox（在台式机和移动设备上）。如果代码是固定的，那么它可以在Firefox中运行而又不会在任何其他浏览器中破坏它，那将解决我的问题。
该网站的HTML模板使用Internet Explorer条件注释添加类，.ie8并.oldie给<html>元素。如果需要解决IE中样式差异的问题，可以在CSS中使用这些类。添加的类与此旧版本的HTML5 Boilerplate中的类相同。
<fieldset>（或div.wrapper）所需的任何宽度，然后select { width:100% }。max-width似乎为元素提供了其父元素原始宽度的％，然后不缩放，width但与父元素缩放。我认为这可以满足您的要求（但我可能会误会）。在更复杂的小提琴中，尝试为左栏中的字段提供％宽度和min-pixel-width。然后给右边的字段100-（left-fields-％-width）％width。