Closed Bug 1680720 Opened 5 years ago Closed 1 year ago

break-inside:avoid doesn't work for flex container

Categories

(Core :: Layout: Flexbox, defect)

Product:
Core
Component:
Layout: Flexbox
Version:
Firefox 83
Type:
defect

Tracking

()

Status:
RESOLVED DUPLICATE of bug 1739561

People

(Reporter: harmageddon95, Unassigned)

Details

User Agent: Mozilla/5.0 (X11; Linux x86_64; rv:83.0) Gecko/20100101 Firefox/83.0

Steps to reproduce:

Showcase: https://codepen.io/zweiiconkram/pen/ExgPeoQ

The CSS columns concept comes with the property break-inside that can be used to disallow breaking inside a container.

Actual results:

When a child element (inside the column layout) is given a display: flex, the break-inside: avoid doesn't have any effect anymore. With display: inline-flex however, it behaves just like for display: inline-block which IMO is correct.

Expected results:

The property break-inside: avoid should have the same effect for display: flex elements as it has for display: block elements.

Bugbug thinks this bug should belong to this component, but please revert this change in case of error.

Component: Untriaged → Layout: Flexbox
Product: Firefox → Core
Severity: -- → S3
Status: UNCONFIRMED → NEW
Ever confirmed: true
Status: NEW → RESOLVED
Closed: 1 year ago
Duplicate of bug: 1739561
Resolution: --- → DUPLICATE

The testcase https://codepen.io/zweiiconkram/pen/ExgPeoQ is setting break-inside:avoid on flex container, so change the bug title accordingly. This has been fixed by bug 1739561.

Summary: break-inside:avoid doesn't work for flex children → break-inside:avoid doesn't work for flex container

Thank you! I forgot about this, but I can confirm that it has been fixed in the meantime.

You need to log in before you can comment on or make changes to this bug.