Question

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

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

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

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

如何让fieldset只能与它的父级一样宽？

Answer 1

浏览器在fieldset元素的默认样式表中有自定义css。

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

您可以设置此规则：

.section fieldset{
    min-width: 0;
}

见小提琴：

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

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

Answer 2

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

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

FIDDLE

Answer 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/

fieldset宽度为父级的100％

3 个答案: