宽度 100% 不会产生父 div 的 100%。孙子内容导致溢出

Posted 2023-02-21

【中文标题】宽度 100% 不会产生父 div 的 100%。孙子内容导致溢出

【英文标题】：width 100% is not yielding 100% of parent div. Grandchild contents are causing overflow

【发布时间】：2022-01-16 16:28:03

【问题描述】：

我正面临文本溢出的经典问题。

总之：我试图通过一系列width: 100% 将顶部元素 (grab_item--content) 的宽度传播到孙子template_panel--item。但是，第一个孩子（带有draggable="false" 的无类元素）不尊重width: 100%。

文本元素本身 (template_panel_item--panelText) 已准备好处理省略号的溢出。

.template_panel_item--panelText--RuXFCGbr 
    width: 100%;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;

但是，溢出逻辑并没有启动，因为width: 100% 不是收缩的。

我将width: 100% 分配给div 的前两层（template_panel_item-panelText 和panel_item--name），这样它们和它们的父级（panel_item--info）都具有相同的宽度。当我检查它们时，所有这些共享相同的宽度：539.94px。

注意：我没有将width: 100% 分配给panel_item--info，因为它有兄弟姐妹，所以它不应该囤积100% 的宽度。我怀疑这是问题的一部分。但是，当我将其更改为width: 100% 时，它的宽度不会改变。

.panel_item--info--CWGaMv4e 
    display: flex;
    flex-direction: column;
    flex: 1 1 0;
    min-height: 0;
    min-width: 0;

沿着 DOM 树向上，第一个非溢出元素是 grab_item--content，其计算宽度为 304px，右填充为 14px，以及 width: 100%。

它唯一的孩子是带有width: 100%的匿名可拖动div。

请注意，它的宽度为 627.94px 而不是 539.94px，因为前面提到了 panel_item--info 的固定宽度兄弟。

其中令人愤怒的部分是可拖动项目的width: 100% 没有被忽略。它只是产生100% 的627.94px。我通过将其width 属性更改为width: 50% 并看到它更改为313.97px 来验证这一点。

width: 100% 不应该给100% 父母的 宽度吗？因此，可拖动项目的width: 100% 不应该产生grab_item--content 的宽度吗？！？！

这是在 Chrome 上。

【问题讨论】：

试试这个：.template_panel_item--panelText--RuXFCGbr white-space: unset

【参考方案1】：

只需删除空格：nowrap。 您可以添加“文本溢出：省略号；”而是“空白：nowrap;”