A percentage height inside a parent sized by its content resolves against the available height, so the parent ends up taller than its own container

Đang mở
  • Có gì không ổn?
#2,057 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ó
4/5
Thời gian dự kiến
3-5 ngày
Mức phù hợp với người mới
35/100
Loại issue
Lỗi
Độ rõ ràng
Khá rõ ràng
Mức độ hoạt động
Sôi nổi
Công nghệ
cpp, react-native
Lĩnh vực
cli, frontend

Hướng nghiên cứu

The layout pass is in yoga/algorithm/CalculateLayout.cpp, in calculateLayoutImpl, where availableInnerHeight is passed to children as ownerHeight regardless of the height sizing mode. Start with hasDefiniteLength and computeFlexBasisForChild, then run the gtest YogaTest.percentage_height_in_content_sized_parent from the gist's YGPercentageHeightContentSizedParentTest.cpp. Done when parent is no taller than outer and sibling sits at top 40.

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

Mô tả

A child with height: '100%' inside a parent whose height comes from its content gets its size from the height Yoga has available while it measures the parent. The parent then ends up taller than the node that contains it, and every sibling after the percentage child is pushed down by the whole available height.

Steps to reproduce

Reproducer (a gtest and the same tree as HTML): https://gist.github.com/YevheniiKotyrlo/3d95c99087b9ac8c0227ab541a8d2c99

  1. Build a tree with Yoga's default config: a root of 390 × 844 holds outer (width: 100), which holds parent (no size set), which holds percentage (width: 10, height: 100%) and then sibling (height: 40).
  2. Call YGNodeCalculateLayout(root, YGUndefined, YGUndefined, YGDirectionLTR).
  3. Read the heights of outer, parent, percentage and sibling, and the top of sibling.

To run it: copy YGPercentageHeightContentSizedParentTest.cpp into tests/, run ./unit_tests once to build, then ./tests/build/yogatests --gtest_filter=YogaTest.percentage_height_in_content_sized_parent.

Expected

Every node is 40 tall and sibling sits at top 40. That is what Chromium 156, Firefox 157 and WebKit 27.2 give for percentage_height_in_content_sized_parent.html in the gist (every div a column flex container with flex-shrink: 0, as Yoga's defaults are):

outer 40, parent 40, percentage 40, sibling 40 (top 40)

The parent's height depends on its content, so the percentage contributes nothing to it (css-sizing-3 §5.2.1, cyclic percentage contribution), and then resolves against the parent's final height. At the very least parent should never be taller than outer, whose height its content sets.

Actual

On main at ff545813c3a7cb492fd01c9ac418ec1629b1e077:

outer 884, parent 924, percentage 924, sibling 40 (top 924)

Expected: (YGNodeLayoutGetHeight(parent)) <= (YGNodeLayoutGetHeight(outer)), actual: 924 vs 884

outer comes out 884 tall (844 available + 40), and parent inside it 924. React Native 0.88.0 mounts the same frames for the same tree of Views in a 390 × 844 window, with both values of enableFlexboxAutoMinSizeInStrictMode.

Where it comes from

In yoga/algorithm/CalculateLayout.cpp, calculateLayoutImpl passes availableInnerHeight down to the children as ownerHeight whatever the height sizing mode is, so while outer is measured with an at-most height of 844, parent gets an owner height to resolve against. hasDefiniteLength then treats the child's 100% as definite against it, and computeFlexBasisForChild uses it as the flex basis. The measuring pass sizes outer from that (844 + 40 = 884), and the final pass resolves the percentage against 884 + 40 = 924.

#1661 looks like the same thing on the width axis of a row.

Built with MSYS2 g++ (C++20) and Ninja on Windows 11 x64, Debug.

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

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.