1428616 - Flexbox item overflows vertically when a new sibling item is added

Status: RESOLVED INVALID

(Core :: Layout, defect)

Description

[Vinay Sajip]

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.

Comment 1

[Oriol Brufau [:Oriol]]

I think this is a duplicate of bug 1092007. The CSSWG resolved to match what Firefox and Edge do.

Comment 2

[Vinay Sajip]

> 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

[Oriol Brufau [:Oriol]]

> 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.

Comment 4

[Vinay Sajip]

OK, I see it now. Thanks for your patience!