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

Posted 2023-03-06

【中文标题】字段集宽度为父级的 100% [重复]

【英文标题】：fieldset width 100% of parent [duplicate]

【发布时间】：2015-02-23 23:02:45

【问题描述】：

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

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

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

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

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

【参考方案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 但不适用于字段集