动态 css 多列布局 - 更新列/强制回流？

如何解决动态 css 多列布局 - 更新列/强制回流？

TLDR：我可以在使用 javascript/jquery 动态更新“css-column”css 后强制刷新列布局吗？

我有一个导航菜单，我将 css 列用于 (I cannot work out how to use the Magento2 menu column functionality)。我不能真正改变标记太多。我想阻止“寡妇”标题的发生（标题在列底部，所有内容在下一列 - 请参见下面屏幕截图中的第三个粉红色标题）。不能用 css 设置，因为导航项是动态的，会发生变化。

（我在父列表上尝试了“break-after:avoid”，但这会阻止列表完全中断 - 即它应该能够在中间的任何位置中断清单）。

我想出了一个几乎可行的hacky解决方案 - 使用javascript我动态地将“break-before: column”添加到任何具有寡妇标题的列表中。 （它检查标题的左偏移量，与第一个列表子项的偏移量进行比较。如果不同，则表示标题从前一列开始）。

这（有时）有效但它（有时）在您稍微调整屏幕大小之前不会更新列。

我一直在尝试these kinds of solutions and many of these too。但是它们似乎都不起作用，例如我尝试过：

console.log(elt.offsetHeight);
console.log(elt.getBoundingClientRect());

尝试了各种类型的“elt”、父元素、整个正文/文档包装器等。我想这可能是因为有问题的元素在您将鼠标悬停在导航链接上之前是隐藏的。但是我使用 chrome devtools 强迫它打开并运行相同的“回流触发”javascript，它仍然没有任何区别？

是否有一种（最好并且不强制在每次页面加载时重排整个文档？？）强制重新计算 css 列的方法？

OR 是使用 css 网格或其他方式的更好解决方案吗？

谢谢！

如果它与另一个可能的解决方案相关，标记如下：

<ul class="level0 submenu">
  <li class="navigation_item__back hidden-desktop">
    <a href="#">Back</a>
  </li>
  <li class="navigation_item__link hidden-desktop">
    <a href="/">Title</a>
  </li>
  <li class="level1 nav-3-1 category-item first parent">
    <a href="">
      <span>Sub Title</span>
    </a>
    <ul class="level1 submenu">
      <li class="navigation_item__back hidden-desktop">
        <a href="#">Back</a>
      </li>
      <li class="navigation_item__link hidden-desktop">
        <a href="">Sub Title</a>
      </li>
      <li class="level2 nav-3-1-1 category-item first">
        <a href="/">
          <span>Lorem 1psum</span>
        </a>
      </li>
      <li class="level2 nav-3-1-2 category-item">
        <a href="/">
          <span>Lorem 2psum</span>
        </a>
      </li>
    </ul>
  </li>
  ...        
</ul>