react / react/yoga

Layout problem related flex

Open
#892 0 comments 0 reactions 0 assignees View on GitHub

Nobody has claimed this yet.

Algorithm
Dominant language
C++
Stars
18.9k
Forks
1.6k
Avg merge
1m
Merged PRs (30d)
1

Description

Report

Issues and Steps to Reproduce

Replaces this with steps to repro your issue.

Using such code to test.

const YGConfigRef config = YGConfigNew();

const YGNodeRef root = YGNodeNewWithConfig(config);
YGNodeStyleSetWidth(root, 750);

const YGNodeRef root_child0 = YGNodeNewWithConfig(config);
YGNodeStyleSetPosition(root_child0, YGEdgeBottom, 0);
// I want root_child0 to layout its children horizontally and expand itself to 2 * 750 width
YGNodeStyleSetFlexDirection(root_child0, YGFlexDirectionRow);
YGNodeStyleSetPositionType(root_child0, YGPositionTypeAbsolute);
YGNodeStyleSetPosition(root_child0, YGEdgeTop, 0);
YGNodeInsertChild(root, root_child0, 0);

const YGNodeRef root_child1= YGNodeNewWithConfig(config);
YGNodeStyleSetFlex(root_child1, 1);
YGNodeStyleSetWidth(root_child1, 750);
YGNodeInsertChild(root_child0, root_child1, 0);

const YGNodeRef root_child2= YGNodeNewWithConfig(config);
YGNodeStyleSetFlex(root_child2, 1);
YGNodeStyleSetWidth(root_child2, 750);
YGNodeInsertChild(root_child0, root_child2, 0);

YGNodeCalculateLayout(root, 750, 2000, YGDirectionLTR);

printf("w root_child0: %f", YGNodeLayoutGetWidth(root_child0));

YGNodeFreeRecursive(root);
YGConfigFree(config);

Expected Behavior

Describe what you expected would happen.

Width of root_child0 after layout should be 2 * 750

Actual Behavior

Describe what actually happened.

Width of root_child0 after layout is 0.

If I didn't set flex to 1 for root_child1 and root_child2, the layout would be correct. But on browser, with or without flex to 1, width of root_child0 is always 2 * 750.

Link to Code

If you have some code that maintainers can clone/test for themselves, bugs can be resolved much faster. Please paste a link here.

When applicable, use this fiddle to post a web repro.

Contributor guide

Open the contributing guide

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. Open a pull request that references the issue number.

Research direction

Start by reproducing the provided YGNode C API snippet, comparing layout with and without flex set on root_child1 and root_child2. Trace the flex and absolute-position layout entry points that handle these nodes; done means root_child0 reports a width of 1500 when both children use flex.

Written by the indexing model from the issue text.

Assessment

Tech stack
cpp
Domain
frontend
Issue type
Bug
Difficulty
4/5
Estimated time
3-5 days
Activity status
Stale
Clarity
Needs clarification
Newbie friendliness
30/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.