HTML fieldset允许 child 无限扩展

Question

我想在 fieldset 中放置一个可滚动的框，但我遇到了一个怪癖，我想不出办法解决它。当您将可滚动的 div 放在 fieldset 中时，fieldset 会扩展而不是使可滚动元素滚动。

这是 a test case .以下无限扩展(嘘):

<div style="width: 300px; overflow: hidden;">
   <fieldset>
      <div style="overflow: scroll; white-space: nowrap;">
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed lorem arcu, sodales non gravida eget, vehicula vitae nulla. Quisque turpis justo, consectetur ut egestas at, pulvinar nec diam. Donec porttitor lobortis elit quis scelerisque. Proin at mollis nibh. Nulla nisi dolor, rutrum nec rhoncus congue, cursus at urna. Curabitur adipiscing euismod nisl nec consequat. Aliquam justo justo, bibendum id molestie eget, dignissim sit amet sapien. Phasellus non erat nulla, quis auctor eros. Proin pellentesque turpis eu ipsum venenatis egestas non eget lacus. Vestibulum ante diam, posuere ut fringilla nec, pretium ac metus. Integer laoreet fringilla ipsum, vel interdum urna pellentesque a. Donec lobortis tincidunt nisi, ac tristique massa pretium ac. Ut vel magna erat, et hendrerit sem. Curabitur vulputate, tellus quis pellentesque pretium, felis odio aliquam sapien, sit amet hendrerit arcu orci ut nulla. Vestibulum suscipit rhoncus arcu, ut aliquam eros sagittis a. Suspendisse eros elit, bibendum venenatis pulvinar at, scelerisque vel quam. 
      </div>
   </fieldset>
</div>

但是if you use a div ，它按预期工作(万岁!):

<div style="width: 300px; overflow: hidden;">
   <div>
      <div style="overflow: scroll; white-space: nowrap;">
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed lorem arcu, sodales non gravida eget, vehicula vitae nulla. Quisque turpis justo, consectetur ut egestas at, pulvinar nec diam. Donec porttitor lobortis elit quis scelerisque. Proin at mollis nibh. Nulla nisi dolor, rutrum nec rhoncus congue, cursus at urna. Curabitur adipiscing euismod nisl nec consequat. Aliquam justo justo, bibendum id molestie eget, dignissim sit amet sapien. Phasellus non erat nulla, quis auctor eros. Proin pellentesque turpis eu ipsum venenatis egestas non eget lacus. Vestibulum ante diam, posuere ut fringilla nec, pretium ac metus. Integer laoreet fringilla ipsum, vel interdum urna pellentesque a. Donec lobortis tincidunt nisi, ac tristique massa pretium ac. Ut vel magna erat, et hendrerit sem. Curabitur vulputate, tellus quis pellentesque pretium, felis odio aliquam sapien, sit amet hendrerit arcu orci ut nulla. Vestibulum suscipit rhoncus arcu, ut aliquam eros sagittis a. Suspendisse eros elit, bibendum venenatis pulvinar at, scelerisque vel quam. 
      </div>
   </div>
</div>

如何让 fieldset 表现得像 div？

Answer 1

WebKit 和 Firefox 将字段集限制为具有基于其内容的计算宽度的“隐式”宽度。以下是在每个中覆盖它的方法。

• WebKit 使它变得相对容易。此行为在默认样式表中定义，因此您可以通过为字段集指定 min-width: 0 来覆盖它。

• Firefox 是一个更严格的坚果，因为字段集宽度约束在 Gecko 布局代码的深处强制执行。幸运的是，有一个解决方法:添加 Gecko-only 规则以将字段集的 display 属性设置为对应于多个内部表元素之一的值。

综合起来:

fieldset { min-width: 0; }

/* FF hack; not needed for newer versions */
@-moz-document url-prefix() { /* Only target Gecko. (Breaks layout in IE.) */
    fieldset { display: table-cell; }
}

jsFiddle demo .

更新(2017 年 9 月 25 日)

需要display: table-cell hack 的[Firefox bug][bug] 现已修复；如果你的目标是较新版本的 Firefox，你可以忽略它并只使用 min-width: 0。 (感谢@Nikolay提醒!)

有关过去为何需要的更多详细信息，my answer到 related question有更完整的解释，包括血淋淋的浏览器内部结构。