flexbox-layout
flexbox-layout copied to clipboard
Setting flex box percent to zero behaves differently than in CSS
- [x] I have searched existing issues and confirmed this is not a duplicate
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>[email protected]</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