Make setWidthFull / setHeightFull behave more predictably

[rolfsmeds]

Describe your motivation

• Setting an element to a fixed size (e.g. 200px) does not guarantee that the element will actually be that size, if it's in the same layout as another element set to 100% (this is because the 100%-sized element forces it to shrink)
• Setting an element to 100% size does not guarantee that the element won't overflow its container, if its contents are bigger than that (e.g. scrolling content), resulting in extra overflow and unwanted scrollbars, etc (this is because the min-size of a flex item is that of its contents, so that overrides the set size)

Codepen emulating the issue: https://codepen.io/rsmeds/pen/YPKNGZY?editors=1100
(Horizontal and VerticalLayout are emulated with divs with classnames row and col, and classes fullsize, fullwidth and fullheight emulate setSizeFull/setWidthFull/setHeightFull in Flow)

Note that:

• Red element is set to be 200px but is actually smaller because the 100% wide scroller next to it forces it to shrink
• Yellow header and footer also shrink to smaller than their 56px set height
• When window is shrunk vertically, the entire layout overflows the viewport, despite the root element being set to 100% height.

Describe the solution you'd like

Solution summary

• Set min-height:0 / min-width:0 as default in HL and VL children respectively, in order to prevent the contents of an element to force it greater than the size it's set to be
• Make setSizeFull / setHeightFull / setWidthFull set flex:1 1 0, in order to use flex-grow to stretch it to take all available space, instead of relying on width and flex-shrink.

Codepen emulating fix: https://codepen.io/rsmeds/pen/ZYzpZPJ

Details

The custom property applied to layout items could be named something like --_layout-item-flex

In HorizontalLayout's internal stylesheet:

::slotted(*) {
  /* Allow items to shrink but not grow, use the set size (if any) as base size */
  --_layout-item-flex: 0 1 auto;
  flex: var(--_layout-item-flex);
  /* Allow shrinking to zero to override default min-width*/
  min-width: 0;
}

Setting width on an element (that happens to be in a HL):

var hl = new HorizontalLayout();
var foo = new Foo();
hl.add(foo);
foo.setWidthFull(); /* Sets `width:100%` but also sets --_layout-item-flex: 1 1 0 on foo */

Setting --_layout-item-flex: 1 1 0 on the element as above overrides the default flex: 0 1 auto, which

• overrides the elements width: 100%
• makes the element grow to fill any available space (which is what we want with setWidthFull())

Note that:

• Other width setters work as before (just set width, not the custom property)
• The --_layout-item-flex has no effect outside of a direct HL child, so if foo above was instead placed in a <div> instead, it would just get width:100%.

Describe alternatives you've considered

No response

Additional context

No response

[sissbruecker]

It seems that calling setWidthFull on a component that is in a VerticalLayout would make it use up all remaining vertical space. We might need separate properties for horizontal and vertical layouts.

[sissbruecker]

Since this affects HasSize, this also requires coordination with the Flow team.

[rolfsmeds]

It seems that calling setWidthFull on a component that is in a VerticalLayout would make it use up all remaining vertical space. We might need separate properties for horizontal and vertical layouts.

Yes, that's right, and what I have in the CodePen PoC.
So we'd need something like
--_vertical-layout-item-flex and --_horizontal-layout-item-flex

[rolfsmeds]

Also just realized we need a flag for opting in/out of this fix.
I PoC:ed a custom property based opt-in flag --vaadin-layout-fix (not necessary the name we'll use) in the CodePen: https://codepen.io/rsmeds/pen/xbKYzaB
(during which I also realized that we can use the shorthand 1 for the full-width/height flex value, as that evaluates to 1 1 0.)