flex-shrink scales by the border-box flex basis instead of the inner (content) flex base size

Đang mở
  • Có gì không ổn?
#2,070 0 bình luận 0 reaction 0 người được giao Xem trên GitHub

Maintainer thường phản hồi trong vòng 1 ngày

Chưa có ai nhận issue này.

Đánh giá

Độ khó
3/5
Thời gian dự kiến
1-2 ngày
Mức phù hợp với người mới
72/100
Loại issue
Lỗi
Độ rõ ràng
Đặc tả rõ ràng
Mức độ hoạt động
Sôi nổi
Công nghệ
cpp, javascript
Lĩnh vực
frontend

Hướng nghiên cứu

Start in yoga/algorithm/FlexLine.cpp at calculateFlexLine, then read distributeFreeSpaceFirstPass and distributeFreeSpaceSecondPass in yoga/algorithm/CalculateLayout.cpp. Check how the scaled shrink factors use the flex base size and account for padding and border, then run the equivalent layout case with two shrinking children. Done means the result is 85 115, matching the CSS behavior described in the issue.

Do mô hình lập chỉ mục viết ra từ nội dung của issue.

Mô tả

Report

Issues and Steps to Reproduce

When items shrink on an overflowing flex line, Yoga weights each item's share of the negative free space by flexShrink * computedFlexBasis, where computedFlexBasis is the border-box size (including padding and border). In CSS Flexbox, the scaled flex shrink factor multiplies by the inner flex base size (excluding padding and border). Because of this, an item with padding or border shrinks more than it should, and its siblings shrink less.

import Yoga, {FlexDirection, Edge} from 'yoga-layout';

const root = Yoga.Node.create();
root.setFlexDirection(FlexDirection.Row);
root.setWidth(200);
root.setHeight(100);

const a = Yoga.Node.create();
a.setWidth(100);
a.setFlexShrink(1);
const b = Yoga.Node.create();
b.setWidth(130);
b.setPadding(Edge.Right, 30);
b.setFlexShrink(1);
root.insertChild(a, 0);
root.insertChild(b, 1);

root.calculateLayout(undefined, undefined);
console.log(a.getComputedLayout().width, b.getComputedLayout().width);

Run with node repro.mjs on yoga-layout 3.2.1 (also reproduces on main at 41118bd via the C API, with Errata::None or default config).

Expected Behavior

85 115. Both items have a 100px inner (content) flex base size (100 for a, and 130 - 30 = 100 for b), so with equal flexShrink: 1 they should each give up 15px of the 30px overflow. Chrome, Firefox, and Safari all produce 85 and 115 for the equivalent box-sizing: border-box flex row.

Per CSS Flexible Box Layout Module Level 1, section 9.7 step 4.c, the scaled flex shrink factor is the product of the item's flex shrink factor and its inner flex base size.

Actual Behavior

87 113 (86.96 and 113.04 without pixel rounding).

In calculateFlexLine (yoga/algorithm/FlexLine.cpp), distributeFreeSpaceFirstPass, and distributeFreeSpaceSecondPass (yoga/algorithm/CalculateLayout.cpp), totalFlexShrinkScaledFactors and flexShrinkScaledFactor multiply resolveFlexShrink() by computedFlexBasis (or childFlexBasis) without subtracting paddingAndBorderForAxis(child, mainAxis, direction, ownerWidth).

Link to Code

Yoga Playground reproduction

Credit: https://ucsbplse.github.io/

Ngôn ngữ chính
C++
Star
18.9k
Fork
1.6k
Merge trung bình
17 giờ 9 phút
Pull request đã merge (30 ngày)
13

Chuẩn bị môi trường

Bắt đầu từ đâu

  1. Đọc hết issue, rồi đọc hướng dẫn đóng góp của dự án.
  2. Bình luận trên issue rằng bạn sẽ nhận — tránh hai người làm cùng một việc.
  3. Fork repository và làm thay đổi trên một nhánh.
  4. Mở pull request có tham chiếu số hiệu của issue.

Issue khác của react/yoga

Tất cả issue của react/yoga

Issue tương tự

Thêm issue về C++

Nhận issue mới trong hộp thư của bạn

Bản tóm tắt ngắn những issue GitHub phù hợp với người mới.