javascript - Dynamic css multi column layout - update columns / force reflow?

Question

TLDR: Can I force a column layout refresh after dynamically updating the 'css-column' css with javascript/jquery?

I have a navigation menu that I am using css columns for (I cannot work out how to use the Magento2 menu column functionality). I cannot really change the markup much. I want to stop 'widow' titles from happening (titles at the bottom of the column, with all the content on the next column - see 3rd pink title in screenshot below). It cannot be set with css as the nav items are dynamic and will change.

(I have tried "break-after:avoid" on the parent list, but this stops the list from breaking altogether - i.e. it should be able to break anywhere in the middle of the list).

I came up with a hacky solution that almost works - with javascript I am dynamically adding "break-before: column" to any list that has a widow title. (It checks the left offset of the title, compared with the offset of the first list child. If it is different then it means the title starts on the previous column).

This (sometimes) works BUT it (sometimes) does not update the columns until you resize the screen a bit.

I have been been trying out these kinds of solutions and many of these too. However none of them seem to work, for example I have tried:

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

Tried 'elt' being all sorts, the parent elements, the whole body/doc wrapper etc. I thought maybe this was because the element in question is hidden until you hover over the nav link. But I forced it to be open using chrome devtools and ran the same 'reflow triggering' javascript and it still made no difference?

Is there a (preferably nice and not forcing reflow of the whole document every pageload??) way to force a recalculation of the css columns?

OR is a better solution possible using css grid / any other way?

Thanks!

In case it is relevant to another possible solution, the markup is like this:

<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>

question from:https://stackoverflow.com/questions/65939581/dynamic-css-multi-column-layout-update-columns-force-reflow

Answer 1

Waitting for answers