%% units calculation:

• width, left and right margins, borders and paddings of each contained block in %% units calculated against width of the container. Container width here minus minimum width of the content of the child is a free space available for distribution.
• height, top and bottom margins, borders and paddings of all contained blocks (if given in %% units) are participating in free space distribution. Therefore if minimal height of content of the container is less than its height then there is a free space. This free space is distributed among all parts of all blocks competing for it, in other words, having values defined in %% units.

%% units calculation

It is similar to the vertical but directions are different:

• height, top and bottom margins, borders and paddings of each contained block given in %% units calculated against height of the container. Container height here minus content height of the contained block is a free space available for distribution.
• width, left and right margins, borders and paddings of all children (if given in %% units) are participating in free space distribution. Therefore if minimal width of content of the container is less than its height then there is a free space. This free space is distributed among all parts competing for it, in other words, having values defined in %% units.

%% units calculation:

• vertical margins if given in %% units are simply ignored - interpreted as undefined. Vertical borders, paddings and height in %% units are calculated against row height which is equal to tallest element in the row.
• width, left and right margins, borders and paddings of all children in the row are calculated exactly as in flow:horizontal.

Row splitting algorithm

1. either sum of width, paddings, borders of current block exceedes available container width;
2. or total sum of all %% units in the row exceedes 100.

Second condition allows to define number of columns for h-flow layout. For example if you have something like this:

ul { flow:h-flow; }

ul li { width:50%%; }

then list items will be placed in two columns and elements in each row will span available width of ul element.

Illustration: options in multicolumn select

left/top/right/bottom attributes of child elements and special grid location units (#) used for definition of block location in final grid.

Example, style block:
#cell { left:2#; top:1#; right:3#; bottom:2#; }

replaces block with id="cell" in the grid so it occupies 4 cells of the grid from r1:c2 to r2:c3. Pay attention that left/top/right/bottom define  positive cell position numbers that start from 1.

width and height attributes of the cell blocks define dimensions of border box of the element (normaly they are dimensiopns of the content box).

%% units calculation:

width and height of cell blocks declared in %% (or *) flex units are computed against width and height of the grid container (that has flow:grid declared). See sdk/html_samples/flows/grid***.htm samples.

paddings and borders of cell elements given in flex units are computed against dimensions of block itself. This makes possible to use for example
#cell { left:2#; top:1#; right:3#; bottom:2#; padding-top:*; padding-bottom:*; }
to align vertically content of the cell block to the middle.

Example, following HTML and style declarations allow to define layout similar to the table on the right:

<div #container>
<p #left>Left</p><p #right>Right</p>
<p #top>Top</p>
</div>

div#container { flow:grid; }
p#left { left:1#; top:2#; }
p#right { left:2#; top:2#; }
p#top { left:1#; right:2#; top:1#; }

Note: engine does not check cells for overlapping. So multiple blocks can occupy the same cell.