Skip to content

flex_grow incorrectly grows child based on parent padding when parent has no fixed height #909

@francozanardi

Description

@francozanardi

Summary

When a flex container (Column) has padding but no fixed height, children with flex_grow > 0 incorrectly grow to fill the padding space. This contradicts CSS Flexbox behavior where flex_grow only distributes available space within the container's content area.

Version

Taffy 0.9.2

Minimal Reproduction

use taffy::prelude::*;

fn main() {
    let mut taffy: TaffyTree<()> = TaffyTree::new();

    // Column with padding=100, NO fixed height
    let column_style = Style {
        display: Display::Flex,
        flex_direction: FlexDirection::Column,
        padding: Rect {
            left: length(100.0),
            right: length(100.0),
            top: length(100.0),
            bottom: length(100.0),
        },
        ..Default::default()
    };

    // Child with flex_grow=1 and explicit height=10
    let child1 = taffy.new_leaf(Style {
        flex_grow: 1.0,
        size: Size { width: length(50.0), height: length(10.0) },
        ..Default::default()
    }).unwrap();

    // Child without flex_grow, same height=10
    let child2 = taffy.new_leaf(Style {
        size: Size { width: length(50.0), height: length(10.0) },
        ..Default::default()
    }).unwrap();

    let column = taffy.new_with_children(column_style, &[child1, child2]).unwrap();
    taffy.compute_layout(column, Size {
        width: AvailableSpace::MaxContent,
        height: AvailableSpace::MaxContent,
    }).unwrap();

    let child1_height = taffy.layout(child1).unwrap().size.height;
    let child2_height = taffy.layout(child2).unwrap().size.height;

    println!("Child 1 (flex_grow=1): {}px", child1_height); // 200.0
    println!("Child 2 (no grow):     {}px", child2_height); // 10.0
}

Expected vs Actual

Child Expected Actual
Child 1 (flex_grow=1) 10px 200px
Child 2 (no grow) 10px 10px

CSS Comparison

The equivalent CSS produces correct behavior (both children have the same height):

<style>
    .column {
        display: inline-flex;
        flex-direction: column;
        padding: 100px;
        box-sizing: border-box;
        /* No height set */
    }

    .child1 {
        flex-grow: 1;
        width: 50px;
        height: 10px;
        background-color: blue;
    }

    .child2 {
        width: 50px;
        height: 10px;
        background-color: red;
    }
</style>

<div class="column">
    <div class="child1"></div>
    <div class="child2"></div>
</div>

Result in browser: Both children are 10px tall.

Question

Is this the expected behavior when size is auto() or unspecified? We noticed that explicitly setting size: length(0.0) produces the CSS-like result (both children at 10px), but auto() causes the child with flex_grow to expand to padding_top + padding_bottom.

If this is intentional, what is the recommended way to achieve CSS-like "fit-content" behavior for flex containers?

Metadata

Metadata

Assignees

No one assigned

    Labels

    A-flexboxRelates to the Flexbox layout algorithmbugSomething isn't working

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions