Javascript 如何强制子元素遵守“flex:nowrap；”CSS指令

我同时在屏幕上有两个d3.js动画，每个动画都由CSS

display:flex控制和
flex:nowrap指令，问题动画（包装）和其他正确显示（即非包装）动画的唯一区别在于：


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

令人沮丧的是，动画坚决拒绝受
flex:nowrap；
指令的控制

问题：

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

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

是否有一种通用方法来确保flex row nowrap行为是由屏幕上实际可见的内容决定的，而不是通过包含（或同级）块级元素，例如
section
或
div
，或更宽但
溢出：隐藏；
子svg
line
s或
path
内容

注意：本主题的其他问题/答案与文本相关，而不是与section、div或svg相关

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

相关的宽度允许在每个周围有足够的自由空间

如果认为父级
flex-flow:row nowrap；
，再加上svg:svg元素的
overflow:hidden；
和块级
display:inline；
CSS设置足以确保不发生换行，那就太好了。我已经在inspector中进行了检查，显示的所有尺寸都在要求的范围内红色表示
弹性流：行nowrap；

只有
部分
（或
div
）起作用，
text
，
svg
，
g
，
input
，
ul
和
li
。在实践中，有些东西导致了不必要的包装。我的感觉是块级元素是问题的根源。您能建议一种避免这种情况的策略吗

如果做不到这一点，我是否可以使用其他方法作为文本输入元素的容器，这些方法不太可能导致问题？
再次说明，答案是在睡眠期间得到的：-）

首先，显示的使用：内联；至少在这种情况下，块级元素似乎没有对一些blogger声称的宽度产生影响（事实上，往往会污染父flex上下文）

这进而导致搜索替代的内联元素以替换
div
或
部分
。在用内联元素
span
代替块级元素
div
或
节
时，所需的
nowrap
行为立即生效，但反过来破坏了我的（现在是本地的）垂直块布局。这是使用
display:inline块恢复的在包含范围上，因此：

最初（稍微简化）：

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

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

..尽管有父级
nowrap
指令，但它是由div（或其他块级）元素导致换行的

现在：

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

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

..其中span具有css
显示：内联块在其上设置的指令和指定的宽度。在这里，遵循了父flex nowrap指令，但在本地（即跨度内）应用了块布局。
似乎我不是唯一遇到这种情况的人