防止孩子增加父母的宽度[重复]

Posted 2023-03-06

【中文标题】防止孩子增加父母的宽度[重复]

【英文标题】：Prevent child from increasing width of parent [duplicate]

【发布时间】：2016-01-09 07:01:06

【问题描述】：

我在div 内部有一个非常宽的table，而fieldset 在form 内部，而form 在article 内部。

这个宽表导致div 和fieldset 增加了它们的宽度。 form 不会增加宽度。

我想为div 显示一个水平滚动条。但这不起作用，因为它的宽度与table 相同。

如何防止div 增加其宽度？ 请注意，table 的高度是动态的，会根据用户交互而变化。 我想在没有 JS 的情况下实现这一点。

Fiddle demonstrating my problem.

如果您认为这是与现有问题的重复，请先使用我的特定设置测试解决方案，谢谢。我测试了很多，但似乎都没有在我的场景中工作。

【参考方案1】：

通过更深入的了解，我注意到fieldset 元素具有直接从web-kit 继承的min-width 属性（至少在Chrome 中）。看来这与您想做的事情背道而驰。

您可以通过指定 fieldset 元素来解决您的问题：

CSS

fieldset  min-width:0px; 

查看FIDDLE

---

更新：也适用于 Firefox 的修复程序

来自对fieldset 行为here 的解释（感谢@Pangloss 捕捉到这一点！）：

CSS

fieldset 
    min-width: 0px;


@-moz-document url-prefix() 
    fieldset 
        display: table-cell;
    

新FIDDLE

【讨论】：

它适用于 Webkit 但不适用于 Firefox。

@Pangloss 谢谢，我会检查是否编辑我的答案。

确实很有趣，尝试了所有方法，但 Firefox 就是不喜欢它。

伙计们看到这个 - ***.com/questions/17408815/…

@DanielHilgarth 已经做过了：D