[css-flexbox] Feature: Items-Limit-Height - Flex-Line - Main Size Determination

Good Day,

For the record incase github disappears and open to any comments on the
follow idea.


https://github.com/w3c/csswg-drafts/issues/10031

I would like to propose an additional feature for flex, which allows us to
abstractly control the Height of the main container which is set to
display: flex in which the flex-items would be laided out. Typically one
can only limit the height traditional with container style height property.
Nowadays we typically design things to be independent of specific
measurements of pixels, rem, em if possible, so they work for all devices.
The natural design of height property in HTML is to keep expanding to
contain its inner contents.

I would like to propose that a new property that allows us to control the
height for flex items,
in which the layout algorithm, would then allow items to be horizontally
laid out as the height is softly constrained.
This property would take soft precedence over width of a container,
basically cause a horizontal/film layout expansion. It must still abide by
min-width of items forcing a horizontal expansion of items with min-width
property set, would cause the items to no longer shrink and

The name of the property is not as important as the functionality, it is
just a suggestion.

This functionality would allow for a lot of improvements in layout to be
made, where by the Items-Limit-height
and existing algorithm would cause items to natural be capable of re-laying
themselves out
as the screen size shrinks for mobile, extra.
I have few examples for flex and float I have assembled that cause natural
collapsing into mobile layout.
Keeping the Title, Error Messages, (spacer) Input Control perfect for both
input required display using before or after selectors.

This property would just make that and many other things a lot easier to
achieve, they also take direction of text into account
for languages that are read from left to right and visa versus, where
layouts will automatically change.

*Examples:*

*Naturally bounded by the browse display width and height natural unbounded*
.---------------.
1,,,,,,2,,,,,3,,,,,4
5,,,,,,6,,,,,7,,,,,8
9,,,,,10,,11,,,,12,
13,,14,,,15,,,16
.---------------.

*With the display:flex;Items-Limit-Height:2*
...............----------------................
1,,,,,2,,,,|,,3,,,,,4,,,,5,,,,6,,,|,7,,,,,,8
9,,,,10,,,|,11,,12,,13,,14,|,15,,16
..............-----------------...............

*With the display:flex;Items-Limit-Height:2;width:(100%,contain) +
Each-Flex-Items:min-width:50% or min-width:contain*
In this case, Items-Limit + width, constrain the layout.

*For few items:*
.----------------.
,,,,,,1,,,,+,,,2,
,,,,,,,,,,,,,3,
.----------------.

*For few items in which the min-width not set.:*
.----------------.
.....1.....2.....3
.....4.....5.....6
.----------------.

*For many items:*
.----------------.
.....1.....+.....2,
.....3,.....+.....4,
.....5.....+.....6,
.....7.....+.....8
.....9.....+....10,
.....11...+....12,
.....13...+....14,
.....15...+....16
.----------------.


Kind Regards,


Wesley Oliver
-- 
----
GitHub:https://github.com/wesleyolis
LinkedIn:https://www.linkedin.com/in/wesley-walter-anton-oliver-85466613b/
Blog/Website:https://sites.google.com/site/wiprogamming/Home
Skype: wezley_oliver
MSN messenger: wesley.olis@gmail.com