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

Abierto
  • ¿Algo no está bien?
#2,057 0 comentarios 0 reacciones 0 asignados Ver en GitHub

Los mantenedores suelen responder en 1 día

Nadie ha tomado este issue todavía.

Evaluación

Dificultad
4/5
Tiempo estimado
3-5 días
Aptitud para principiantes
35/100
Tipo de issue
Error
Claridad
Bastante claro
Estado de actividad
Activo
Stack tecnológico
cpp, react-native
Área
cli, frontend

Línea de trabajo

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.

Escrito por el modelo de indexación a partir del texto del issue.

Descripción

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.

Lenguaje dominante
C++
Estrellas
18.9k
Forks
1.6k
Merge medio
1 d 31 min
PR fusionados (30 d)
14

Preparar el entorno

Primeros pasos

  1. Lee el issue completo y luego la guía de contribución del proyecto.
  2. Comenta en el issue que vas a ocuparte — evita que dos personas hagan lo mismo.
  3. Haz un fork del repositorio y trabaja en una rama.
  4. Abre un pull request que haga referencia al número del issue.

Más de react/yoga

Todos los issues de react/yoga

Issues similares

Más issues de C++

Recibe los nuevos issues en tu correo

Un resumen breve de issues de GitHub para principiantes.