Nested Layout w/Div Overflow Issue/Behavior Change in Chrome 79.0.3945.88

Flow
1

When nested layouts contain a div set to overflow, the div will size out to the outermost layout as it overflows before the scrollbar(s) will appear. This also causes scrollbars around the application. In the prior release, the div would stay at its original size as it overflowed with child elements.

Example:

package com.example;

import com.vaadin.flow.component.Text;
import com.vaadin.flow.component.html.Div;
import com.vaadin.flow.component.html.H2;
import com.vaadin.flow.component.orderedlayout.VerticalLayout;
import com.vaadin.flow.router.Route;

// Vaadin 13.0.12
@Route("divissue")
public class NestedLayoutDivOverflowIssue extends VerticalLayout
{
    public NestedLayoutDivOverflowIssue() {

        setSizeFull();

        H2 header = new H2("Header (Nested Layout/Div Overflow (Issue?)");
        H2 footer = new H2("Footer");

        VerticalLayout body = new VerticalLayout();
        body.setPadding(false);
        body.setSizeFull();

        Div cards = new Div();
        cards.setSizeFull();
        cards.getStyle().set("overflow-y", "scroll");

        // once the cards overflow the div it will size out to the outer layouts 
		// size, causing scrollbars around the application
        for (int i = 1 ; i <= 30 ; i++) {
            Div card = new Div(new Text("// Card " + i));
            card.setHeight("80px");
            card.setWidthFull();
            cards.add(card);
        }

        body.add(cards);

        add(header, body, footer);
    }
}

This behavior started with Chrome 79.0.3945.88 on Windows 10, ~Dec 2019. I found Edge does the same; an older version of Safari for iOS does not.

I found this on Stack Overflow that worked around the issue for me when applied to the cards div.

.chrome-79-workaround {
    height: 0;
    flex: 1 1 auto;
}

[https://stackoverflow.com/questions/59355171/problem-with-latest-chrome-and-flexbox-overflow]
(http://)

18024029.java (1.19 KB)