taffy icon indicating copy to clipboard operation
taffy copied to clipboard

Flexible child sizing issues

Open jihiggins opened this issue 3 years ago • 0 comments

taffy version

https://github.com/DioxusLabs/taffy/commit/d295d9b5a1de28fa6644a7a4d5fefcd3b6957773

What you did

{
  "root": {},
  "container": {
    "size": {
      "width": {
        "Points": 800.0
      },
      "height": {
        "Points": 400.0
      }
    }
  },
  "container2": {
    "flex_direction": "Row",
    "flex_wrap": "Wrap",
    "align_content": "FlexStart",
    "align_items": "FlexStart",
    "flex_grow": 1.0
  },
  "window": {
    "size": {
      "width": {
        "Points": 50.0
      },
      "height": {
        "Points": 50.0
      }
    }
  }
}

What went wrong

GIF 9-1-2022 11-38-33 AM

The nodes are setup as

Root[Container[Container2[window, window, window, ...], Container2]]

(Root is just set to the size of the screen.)

I would expect both Container2 nodes to only take up half of Container's max_width, but it seems like the Container2 nodes end up getting a max_width equal to Container.max_width. The children in the Container2 node seem to break the flex_grow/flex_basis settings. It seems like they maybe aren't really accounting for siblings when determining their max_width?

This is what happens with flex_basis: Percent(0.5) on the Container2 instances: unknown

If nothing else, it seems like it shouldn't have anything completely shifted out of the bounds of the top level Container node.

The only settings I've found that don't have this problem are when I just set the "size" for the Container2 nodes to the correct values manually.

jihiggins avatar Sep 01 '22 15:09 jihiggins