flow utility issue

Hey, If I have a div with another div as it's child both utilizing a flow utility with each of their flow-space custom properties having different values, setting a value for the custom property on the child div, aiming to create space for it's children, updates it's flow-space value in the primary div also, resulting in a larger/smaller space above it. What would be recommended to avoid this sort of behavior and allow this to work as expected?

If i didn't explain the structure so well, here is what the html and css looks like:
<div class="flow">
  ...
  ...
  <div class="flow">
    ...
  </div>
</div>

.flow > * + * {
  margin-top: var(--flow-space, 1rem);
}

Thanks in advance.
Was this page helpful?