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

[wesleyolis]

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
.----------------.

[Loirooriol]

I'm having trouble understanding what you are saying because I don't know what flex-direction and writing-mode you are thinking about. You also say that this property would be "Height of the main container", then "height for flex items", and then "precedence over width of a container".

Also your examples aren't formatted with a monospace font so I'm not sure if we are seeing the same alignments due to font differences. Please use markdown code blocks. I'm also not sure why some lines are partially depicted with dots and partially with hyphens, is there a difference in meaning?