Bug 151965

Summary:	Incorrect behavior when flex box item grows past container bounds
Product:	WebKit	Reporter:	Jon Lee <jonlee>
Component:	Layout and Rendering	Assignee:	Nobody <webkit-unassigned>
Status:	NEW ---
Severity:	Normal	CC:	dino, hyatt, simon.fraser
Priority:	P2
Version:	WebKit Nightly Build
Hardware:	All
OS:	OS X 10.11

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.