javascript - 如何强制子元素遵守 `flex: nowrap;` CSS 指令

Question

我同时在屏幕上显示了几个 d3.js 动画，每个都由 CSS 管理 display: flex;和 flex: nowrap;指令，有问题的动画(换行)和其他正确显示的(即非换行)动画之间唯一明显的区别是:

• 因为它有非 svg 标题和文本输入元素，所以它包含锚定 div或 section元素。 (据我了解，这些是 block 级的，理论上占据了整个可用的显示宽度，因此在 css 文件中已被设置“覆盖”display: inline;。
• 溢出的 svg 路径元素，其长度现在已被物理缩短以匹配包含 svg:svg 元素的限制。

令人沮丧的是，动画坚决拒绝受 flex: nowrap; 的管辖。指令。

问题:

是否有一种通用方法来确保 flex row nowrap 行为由屏幕上实际可见的内容决定，而不是由包含(或同级) block 级元素(例如 section)决定或 div , 或更宽但 overflow: hidden; child svg line s 或 path内容？

注意:关于此主题的其他问题/答案与文本相关，而不是部分、div 或 svg。

所有动画理论上都由父级控制flex-flow: row nowrap;设置。

相关的宽度可以在每个宽度周围留出足够的自由空间。

如果能想到父类就好了flex-flow: row nowrap; , 连同 svg:svg 元素的 overflow: hidden;和 block 级 display: inline; CSS 设置足以确保不会发生换行。我已经在检查器中检查过，显示的所有尺寸都在 flex-flow: row nowrap; 要求的限制范围内。 .

游戏中唯一的元素是section (或 div )，text , svg , g , input , ul和 li .实际上，有些东西会导致不需要的包装。我的感觉是 block 级元素是问题的根源。您能提出避免这种情况的策略吗？

如果做不到这一点，我是否可以使用不太可能导致问题的替代方案作为文本输入元素的容器？

Answer 1

再一次，答案在 sleep 中到达.. :-)

首先，display: inline的使用；在 block 级元素上似乎没有，至少在这种情况下，对某些博主声称的宽度有影响(实际上往往会污染父 flex 上下文)。

这反过来导致寻找替代的 内联 元素来替换 div 或 section。在用内联元素 span 代替 block 级元素 div 或 section 时，所需的 nowrap 行为立即生效，但又破坏了我的(现在是本地的)垂直 block 布局。这是在包含范围内使用 display:inline-block; 恢复的，因此:

最初(有些简化):

     ---------- header
    /
div--- svg:g -- svg:svg (with overflow:hidden;)
    \
     ---------- user text input area

..尽管有父级 nowrap 指令，但它是由 div(或其他 block 级)元素引起的。

现在:

     ---------- header
    /
span-- svg:g -- svg:svg (with path extents matching those of svg:svg container)
    \
     ---------- user text input area

..whereby span 在其上设置了 css display:inline-block; 指令和指定的宽度。在这里，遵循了父 flex nowrap 指令，但在本地(即在跨度内)应用了 block 布局。