Incorrect width of children when using align baseline and child in row as reference
Nobody has claimed this yet.
- Dominant language
- C++
- Stars
- 18.9k
- Forks
- 1.6k
- Avg merge
- 1m
- Merged PRs (30d)
- 1
Description
Report
- I have searched existing issues and this is not a duplicate
Issues and Steps to Reproduce
In the following test:
The expected left position of root_child1_child1 is 500px while it should be 250px:
Because its parent's (root_child1) width is 500px with flexDirection: row and 2 children of width 500px each:
Since the parent's width is only 500px, both children can only take 250px to remain within the bounds of the parent element. This is exactly how Firefox & Chrome layout this combination in this HTML:
<!DOCTYPE html>
<html>
<head>
<title>align baseline test</title>
<style>
body {
margin: 0px;
}
#root {
width: 1000px;
height: 1000px;
align-items: baseline;
display: flex;
flex-direction: row;
}
#root_child0 {
display: flex;
flex-direction: column;
width: 500px;
height: 600px;
}
#root_child1 {
display: flex;
flex-direction: row;
width: 500px;
height: 800px;
align-items: baseline;
}
#root_child1_child0 {
display: flex;
flex-direction: column;
width: 500px;
height: 500px;
}
#root_child1_child1 {
display: flex;
flex-direction: column;
width: 500px;
height: 400px;
}
</style>
</head>
<body>
<div id="root">
<div id="root_child0"></div>
<div id="root_child1">
<div id="root_child1_child0"></div>
<div id="root_child1_child1"></div>
</div>
</div>
</body>
</html>
Note: you'll have to use the DevTools to find the width of root_child1_child0 and root_child1_child1 but it is 250px each.
Expected Behavior
The width of root_child1_child0 and root_child1_child1 should be 250px each.
Actual Behavior
The width of root_child1_child0 and root_child1_child1 is 500px each and overflows the parent.
Link to Code
Here's a fiddle: https://jsfiddle.net/0pLaox48/
Contributor guide
First steps
- Read the whole issue, then the project's contributing guide.
- Comment on the issue to say you are picking it up — it saves two people doing the same work.
- Fork the repository and make your change on a branch.
- Open a pull request that references the issue number.
Research direction
Start with tests/YGAlignBaselineTest.cpp, especially the referenced test around lines 418 and 453-454, and run that baseline-alignment test. Compare Yoga’s child positions and widths with the expected 250px values and the browser behavior shown in the issue. Done means both children measure 250px wide and the test passes without overflowing root_child1.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- cpp
- Domain
- frontend
- Issue type
- Bug
- Difficulty
- 3/5
- Estimated time
- 1-2 days
- Activity status
- Stale
- Clarity
- Clearly specified
- Newbie friendliness
- 35/100