IE11 flex issues with ordered layouts, content is not wrapped

[johannest]

When having H1, H2 etc. elements inside VerticalLayouts which are inside HorizontalLayout, the content of H-element are not wrapped in IE11.

Minimal reproducible example:

@Theme(value = Lumo.class, variant = Lumo.LIGHT)
public class MainView extends HorizontalLayout implements RouterLayout {
    public MainView() {
        VerticalLayout vl1 = new VerticalLayout();
        VerticalLayout vl2 = new VerticalLayout();

        vl1.add(new H2("Proin rutrum ultricies est eget blandit"));
        vl1.add(new H3("Donec eget nisi orci. Curabitur fringilla risus id nisi tempor, eu porta nisl pretium."));

        vl2.add(new H2("Proin rutrum ultricies est eget blandit"));
        vl2.add(new H3("Donec eget nisi orci. Curabitur fringilla risus id nisi tempor, eu porta nisl pretium."));

        add(vl1, vl2);
    }
}

Expected behavior: content is wrapped like similarly as in Chrome:

Actual behavior in IE11:

Versions: Vaadin 14.0.4, IE11, Windows 10 Pro, Lumo theme

[TatuLund]

Those HX-elements should have "align-self: stretch;", other browsers than IE11 work without it.

[TatuLund]

So this works also in IE11

        HorizontalLayout hl = new HorizontalLayout();

        VerticalLayout vl1 = new VerticalLayout();
        VerticalLayout vl2 = new VerticalLayout();

        H2 h21 = new H2("Proin rutrum ultricies est eget blandit");
        h21.getStyle().set("align-self", "stretch");
        vl1.add(h21);
        H3 h31 = new H3("Donec eget nisi orci. Curabitur fringilla risus id nisi tempor, eu porta nisl pretium.");
        h31.getStyle().set("align-self", "stretch");
        vl1.add(h31);

        H2 h22 = new H2("Proin rutrum ultricies est eget blandit");
        h22.getStyle().set("align-self", "stretch");
        vl2.add(h22);
        H3 h32 = new H3("Donec eget nisi orci. Curabitur fringilla risus id nisi tempor, eu porta nisl pretium.");
        h32.getStyle().set("align-self", "stretch");
        vl2.add(h32);

        hl.add(vl1, vl2); 
        add(hl);

Now, the next question is that should we change our Hx components to have this style automatically.

[Haprog]

Is this only an issue with H* (header) elements or all elements with some specific CSS display style or maybe also other elements?

I guess it could be fixed either by changing those components (when using Java API) to automatically apply the style, or alternatively having HorizontalLayout and VerticalLayout automatically apply it to specific types of components that are added to it.

[TatuLund]

You are right, I think that this generally applies to all elements that can contain text starting from plain Div. In Vaadin 14 we should be able to detect IE11 reliably and add the needed CSS conditionally in the places we can. Probably there are some cases, where we do not want to do this, since there could be minor risk for adverse effects. Anyway as we claim to support IE11, we have done something similar in Vaadin 8 as well, trying to do our best to obscure some of the nasty behaviors of IE11 when it is possible.