[details] Wrong behavior when using 100% height and width

[mlopezFC]

Vaadin Version

Tested with Vaadin 14.5.1

Description

Right now the flow component doesn't implement HasSize (until vaadin/vaadin-details#34 is implemented), so basically you can't configure the size with Java API. But besides that, if the component is configured to occupy 100% width and height is not behaving like it should. Taking the following example into account:

@Route
public class MainView extends VerticalLayout {
    public MainView() {
        this.setSizeFull();
        TextArea textArea = new TextArea();
        textArea.setSizeFull();
        Details importDetails = new Details();
        importDetails.getElement().getStyle().set("width", "100%");
        importDetails.getElement().getStyle().set("height", "100%");
        importDetails.getElement().getStyle().set("background-color", "green");
        importDetails.setSummaryText("Details example");
        importDetails.addContent(textArea);
        add(importDetails);
    }
}

Expected outcome

If configured to have 100% height and width then:

• If it's not expanded it should occupy 100% of the width, but the height should remain in "one line".
• If expanded and the height is 100% then it should occupy 100% of the parent
• Components inside the expanded details, when occupying 100%, should be allowed to occupy 100% of the heigth.

Actual outcome

• It's occupying the whole height even if it's not expanded
• The inner component (in this case a TextArea) is not occupying 100% height even if it was configured with setSizeFull()

Steps to reproduce

Just load the page

Browsers Affected

Probably all browsers

[Haprog]

For this use case I'd suggest implementing a built in theme variant with a name like fill-height which could have styles like:

:host([theme~="fill-height"]) {
  max-height: 100%;
}
:host([theme~="fill-height"][opened]) [part="content"] {
  height: 100vh;
  max-height: 100%;
}
:host([theme~="fill-height"]) ::slotted(*) {
  height: 100%;
}

The main problems are that the content child is automatically wrapped in a <div> in light DOM (by the Details Java component at least) and additionally there is a [part="content"] wrapper in the shadow root. And to be able to make the detail content have an effective 100% height, both of those need to have a set height too.

Though additionally it might make sense to override the default behaviour of setSizeFull() in case of Details. Since it doesn't make much sense to make the vaadin-details element always 100% height as that wouldn't be very practical when it's collapsed.

[Haprog]

See this internal Slack thread for more context https://vaadin.slack.com/archives/C3TGRP4HY/p1616703752100700