字段集宽度为父级的 100% [重复]答案

【问题标题】：fieldset width 100% of parent [duplicate]字段集宽度为父级的 100% [重复]
【发布时间】：2015-02-23 23:02:45
【问题描述】：

我需要在字段集中有一个可滚动的 div。我的问题是字段集扩展到其内容宽度而不是与其父级保持一致。

<div class="section">
    <fieldset>
        <div class="list">
        </div>
    </fieldset>
</div>

http://jsfiddle.net/UziTech/tg5uk25L/

这两个框的底部都应该有滚动条，但顶部的一个在字段集中，因此它不会控制溢出。

如何让字段集的宽度与其父级一样宽？

【问题讨论】：

标签： html css fieldset

【解决方案1】：

浏览器在其默认样式表中为 fieldset 元素提供了自定义 CSS。

在 Chrome 上它有 min-width: -webkit-min-content;

你可以设置这条规则：

.section fieldset{
    min-width: 0;
}

见小提琴：

http://jsfiddle.net/tg5uk25L/4/

使用 Firebug、Chrome 开发工具检查元素，以查看样式表中 div 和 fieldset 元素之间的区别！

【讨论】：

谢谢。我认为它可能是这样的，但我没有寻找正确的属性。
不幸的是，这对 Firefox 没有帮助...
我认为width 总是覆盖min-width 和max-width。很高兴知道。
字段集可能很危险。
我们如何修复愚蠢的Firefox？

【解决方案2】：

只需在父 .section 上设置 overflow: scroll。这将包含溢出并添加滚动条。

.section {
  width: 100%;
  border: 10px double;
  box-sizing: border-box;
  overflow: scroll; <----
}

FIDDLE

【讨论】：

我希望字段集是其父级的 100% 宽度。我不希望它滚动。我希望字段集中的 div 滚动。

【解决方案3】：

从您的 jsfiddle 中，也许您忘记将字段集添加到第二部分

这是一个快速修复

.section {
    width: 100%;
    border: 10px double;
    box-sizing: border-box;
    overflow-x: auto;
}

td {
    padding: 0 100px;
    border: 1px solid;
}

http://jsfiddle.net/oussamaelgoumri/meqvbjf1/

【讨论】：

我故意这样做是为了表明它适用于 div 但不适用于字段集