Flexbox item overflows vertically when a new sibling item is added

RESOLVED INVALID

Status

()

RESOLVED INVALID
10 months ago
10 months ago

People

(Reporter: vinay_sajip, Unassigned)

Tracking

57 Branch
Points:
---

Firefox Tracking Flags

(Not tracked)

Details

(Reporter)

Description

10 months ago
User Agent: Mozilla/5.0 (Windows NT 6.3; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/63.0.3239.132 Safari/537.36

Steps to reproduce:

See the pen

https://codepen.io/vsajip/pen/aEVLMe

You should see a flexbox layout which has a scrolling list between a header and footer, with the <ul>'s parent having flex-grow: 1 to occupy all unused space in its container, and the <ul> having overflow-y: auto so that it scrolls inside its parent as needed.

To see the problem, uncomment out the div#description.


Actual results:

The list now overflows the container.


Expected results:

The list should not overflow the container. The list parent should occupy the available height, and the list should scroll within it, as it did before.

The expected behaviour is observed when the pen is viewed in Chrome and Chromium.

Updated

10 months ago
Component: Untriaged → Layout
Product: Firefox → Core

Comment 1

10 months ago
I think this is a duplicate of bug 1092007. The CSSWG resolved to match what Firefox and Edge do.
(Reporter)

Comment 2

10 months ago
> I think this is a duplicate of bug 1092007.

I am not so sure. That's because I don't see why the definiteness or otherwise of the containers' height changes when div#description is uncommented. What we have initially is:

CSS:
    html, body, 
    .full-height {
      height: 100%;
      margin: 0;
    }

    .flex-col {
      display: flex;
      flex-direction: column;
    }

    .stretch {
      flex-grow: 1;
    }

    #list-container {
      overflow-y: auto;
    }

HTML:

    html
      body
        div#container.full-height.flex-col
          <!-- div#description -->
          div#list-row.full-height.stretch.flex-col
            div#list-container-parent.full-height.stretch.flex-col
              div#header
              div#list-container.stretch
                ul
              div#footer

In this setup, which shows the expected behaviour, the layout engine seems to consider that the outer containers have definite heights, because nothing overflows the browser window. There is only one scroll bar, that of the ul scrolling inside div#list-container. This is expected, as the html and body tags are set to have a style of "height: 100%; margin: 0". Why does uncommenting the div#description change the state of affairs? After uncommenting, the browser window (result window on Codepen) no longer contains everything - the footer is now out of view.

Comment 3

10 months ago
> Why does uncommenting the div#description change the state of affairs?

Because #list-row has height:100% and it has a sibling, so together they exceed 100%.
This does not happen on Chrome because there #container does not have a definite height, so #list-row's height:100% behaves as auto.
(Reporter)

Comment 4

10 months ago
OK, I see it now. Thanks for your patience!
(Reporter)

Updated

10 months ago
Status: UNCONFIRMED → RESOLVED
Last Resolved: 10 months ago
Resolution: --- → INVALID
You need to log in before you can comment on or make changes to this bug.