Kevin Powell - Community•4mo ago

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>

<div class="flow">
  ...
  ...
  <div class="flow">
    ...
  </div>
</div>

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

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

Thanks in advance.

1 Reply

clevermissfox•4mo ago

Add some padding for the parent div because otherwise the margin of the parent meets the margin of the child and something about collapsing margins affects the parent margin even when declared on the child

Gaming

Programming

flow utility issue