Hacktoberfest 2026: le issue che i maintainer hanno segnato per ottobre, aperte e adatte ai principianti. Sfoglia le issue Hacktoberfest

Free space is computed from min-clamped flex bases, so a growing item with minWidth gets its minimum plus a full share

Aperta
  • Qualcosa non va?
#2,035 0 commenti 0 reazioni 0 assegnatari Vedi su GitHub

I maintainer di solito rispondono entro 1 giorno

Nessuno ha ancora preso questa issue.

Valutazione

Difficoltà
4/5
Tempo stimato
3-5 giorni
Idoneità per principianti
68/100
Tipo di issue
Bug
Chiarezza
Specificata chiaramente
Stato di attività
Attiva
Stack tecnologico
cpp, javascript
Ambito
frontend

Direzione di ricerca

Start in yoga/algorithm/FlexLine.cpp, focusing on calculateFlexLine, distributeFreeSpaceFirstPass, and distributeFreeSpaceSecondPass. Reproduce the supplied two cases with yoga-layout and trace how the clamped childFlexBasis affects free-space distribution. Done means the cases produce 40 / 80 and 200 / 50 / 50, matching the browser results.

Scritto dal modello di indicizzazione a partire dal testo della issue.

Descrizione

Report

  • I have searched existing issues and this is not a duplicate. #485 may share the root cause, but it also involves a percentage flex-basis and max-width; this is the minimal case.

Issues and Steps to Reproduce

When a growing item's minWidth is larger than its flex basis, Yoga computes the line's free space from the clamped basis and grows the item from there. CSS shares out free space from the unclamped flex base sizes, and applies the minimum only when the item would end up below it.

<div style="display: flex; width: 120px; height: 10px">
  <div style="flex: 1; min-width: 30px"></div>
  <div style="flex: 2"></div>
</div>

<div style="display: flex; width: 300px; height: 10px">
  <div style="flex: 1; min-width: 200px"></div>
  <div style="flex: 1"></div>
  <div style="flex: 1"></div>
</div>

The same in yoga-layout 3.2.1, the version on npm:

import Yoga from 'yoga-layout';

function row(width, items) {
  const root = Yoga.Node.create();
  root.setFlexDirection(Yoga.FLEX_DIRECTION_ROW);
  root.setWidth(width);
  root.setHeight(10);
  const nodes = items.map(([grow, min], i) => {
    const node = Yoga.Node.create();
    node.setFlexGrow(grow);
    node.setFlexShrink(1);
    node.setFlexBasis(0);
    if (min) node.setMinWidth(min);
    root.insertChild(node, i);
    return node;
  });
  root.calculateLayout(undefined, undefined, Yoga.DIRECTION_LTR);
  return nodes.map((node) => node.getComputedWidth());
}

console.log(row(120, [[1, 30], [2, 0]])); // [60, 60]
console.log(row(300, [[1, 200], [1, 0], [1, 0]])); // [233, 34, 33]

setUseWebDefaults(true) on the config gives the same numbers.

Expected Behavior

40 / 80 and 200 / 50 / 50. Chrome, Firefox and Safari all give these.

Per CSS Flexbox 9.7, the initial free space subtracts the flex base sizes of the unfrozen items, not their hypothetical main sizes. Step 3 freezes an item at its hypothetical main size only when its flex factor is 0, or, when growing, when its base size is greater than its hypothetical size. An item whose min-width raises it above its base therefore stays flexible from base 0. In the first row, the free space is 120, shared 40 / 80, and 40 does not violate the 30px minimum. In the second row, the 300px is shared 100 each. The first item violates its 200px minimum, so it is frozen at 200 and the remaining 100 goes 50 / 50 to the other two.

Actual Behavior

60 / 60 and 233 / 34 / 33: the item with the minimum gets its minimum plus a full share, and its siblings lose the difference.

On main, calculateFlexLine (yoga/algorithm/FlexLine.cpp) adds boundAxisWithinMinAndMax(computedFlexBasis) to sizeConsumed. Both distributeFreeSpaceFirstPass and distributeFreeSpaceSecondPass start each item from that clamped childFlexBasis. So the free space comes out 30 short in the first row, and the 30 is added back on top of the item's share. I have not built main to confirm the numbers there, but the code paths are the ones above.

Link to Code

The snippets above are self-contained. We found this in react-x11, a React renderer that lays out with yoga-layout, while fixing a related bug where a stale minimum had been hiding it.

Lingua principale
C++
Stelle
18.9k
Fork
1.6k
Merge medio
18h 48m
PR unite (30g)
4

Preparare l'ambiente

Come iniziare

  1. Leggi tutta la issue e poi la guida ai contributi del progetto.
  2. Commenta sulla issue per dire che te ne occupi tu — evita che due persone facciano lo stesso lavoro.
  3. Fai un fork del repository e lavora su un branch.
  4. Apri una pull request che faccia riferimento al numero della issue.

Altre issue di react/yoga

Tutte le issue di react/yoga

Issue simili

Altre issue su C++

Ricevi le nuove issue nella tua casella

Un breve riepilogo di issue GitHub adatte ai principianti.