Skip to content

Clipped children when using flexWrap="wrap" and large width divider #525

Open
@chrisbanes

Description

@chrisbanes

Issues and steps to reproduce

Below you can see a screenshot of a FlexboxLayout, which is clipping it's children:

Screenshot_1576202779

The layout is defined as so:

<com.google.android.flexbox.FlexboxLayout
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:paddingVertical="@dimen/spacing_small"
    android:paddingEnd="@dimen/spacing_normal"
    app:dividerDrawableVertical="@drawable/vertical_spaced_divider"
    app:dividerDrawableHorizontal="@drawable/horizontal_spaced_divider"
    app:flexWrap="wrap"
    app:showDividerVertical="middle"
    app:showDividerHorizontal="middle"/>

The dividers are implemented like so:

vertical_spaced_divider.xml

<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
    <item
        android:drawable="?android:attr/listDivider"
        android:left="16dp"
        android:right="16dp" />
</layer-list>

horinzontal_spaced_divider.xml

<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
    <item
        android:drawable="?android:attr/listDivider"
        android:top="16dp"
        android:bottom="16dp" />
</layer-list>

Expected behavior

I expect the children to not be constrained horizontally, and the title text of each item stays on 1 line.

Each of the children has a width of wrap_context, so FlexboxLayout should be moving the item to the next line if there is not enough space.

If I remove the divider, the items are wrapped as expect.

Version of the flexbox library

2.0.0

Metadata

Metadata

Assignees

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