Skip to content

Setting flex box percent to zero behaves differently than in CSS #638

Open
@Marci599

Description

@Marci599

Issues and steps to reproduce

So i have a flex box in both Android Studio and in CSS. My flex direction is row, flex warp is set to wrap and i have a few children with the width set to wrap content, flex basis percent is 0 and flex grow is 1
If i remove flex basis percent, the flex wrap works, but with flex basis percent set to 0, the parent no longer wraps it's children if needed, they just simply shrink forever.

Expected behavior

With CSS the above setup will result the children to have the exact same size when they have enough space, but when there is no longer enough space for all of them to have the exact same size, the widest ones will shrink until they can't shrink anymore, and that's when the parent wraps them.

Version of the flexbox library

3.0.0

Link to code

Android:

<com.google.android.flexbox.FlexboxLayout
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    app:flexDirection="row"
    app:flexWrap="wrap">

    <Button
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        app:layout_flexBasisPercent="0"
        app:layout_flexGrow="1" />

    <Button
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        app:layout_flexBasisPercent="0"
        app:layout_flexGrow="1" />
</com.google.android.flexbox.FlexboxLayout>

HTML:

<div class="cards">
 <div>
     <img src="mail.svg" alt="Email">
     <p>example@gmail.com</p>
 </div>
 <div>
     <img src="discord-icon-svgrepo-com.svg" alt="Discord">
     <p>example</p>
 </div>
 <div>
     <img src="fiverr_logo.png" alt="Fiverr">
     <p>@example</p>
 </div>
</div>

CSS for HTML:

.cards{
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
}

.cards > div{
    display: flex;
    background-color:  black;
    flex-grow: 1;
    flex-basis: 0;
}

Android
https://github.com/google/flexbox-layout/assets/40640441/b40b153c-b7c4-4b44-bed5-41e0ee328194

HTML, CSS
https://github.com/google/flexbox-layout/assets/40640441/74079d21-9e67-403d-a1bb-271559268b16

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions