Bug 151965 - Incorrect behavior when flex box item grows past container bounds
Summary: Incorrect behavior when flex box item grows past container bounds
Status: NEW
Alias: None
Product: WebKit
Classification: Unclassified
Component: Layout and Rendering (show other bugs)
Version: WebKit Nightly Build
Hardware: All OS X 10.11
: P2 Normal
Assignee: Nobody
URL:
Keywords:
Depends on:
Blocks:
 
Reported: 2015-12-07 14:07 PST by Jon Lee
Modified: 2015-12-07 14:07 PST (History)
3 users (show)

See Also:

Attachments
Add an attachment (proposed patch, testcase, etc.)

Note You need to log in before you can comment on or make changes to this bug.
Description Jon Lee 2015-12-07 14:07:00 PST 
(After 151957) If a flex box item grows such that the container has to be stretched past its bounds, subsequent flex box items are clipped.

The structure I have is (simplification of animometer structure):

<body>
    <main>
        <div class="spacer"></div>
        <div id="section-container"></div>
        <div class="spacer"></div>
    </main>
</body>

html,body { height: 100%; }
main {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    flex-flow: column;
}
.spacer {
    flex: 1 0 20px;
    width: 10px;
}

If #section-container ends up being taller than the viewport (which is greater than the container bounds), the lower spacer is clipped off. This works in Firefox and Chrome.