Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Open
1 task done
Marci599 opened this issue Apr 7, 2024 · 0 comments
Open
1 task done

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

Marci599 opened this issue Apr 7, 2024 · 0 comments

Comments

@Marci599
Copy link

Marci599 commented Apr 7, 2024

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

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

1 participant