@@ -938,10 +938,11 @@ The 'justify-content' and 'align-content' Properties</h3>
938938
939939### Static Position of Absolutely-Positioned Boxes ### {#distribution-abspos-static}
940940
941- When applying the layout rules for absolutely-positioned elements
942- ([[CSS2#abs-non-replaced-width]] and [[CSS2#abs-replaced-width]] )
941+ When sizing absolutely-positioned boxes
942+ whose inline-axis offsets are both ''left/auto''
943+ according to [[CSS2#abs-non-replaced-width]] and [[CSS2#abs-replaced-width]] ,
943944 wherever the 'direction' property of the <a>static-position containing block</a> is referenced,
944- instead reference the value of its 'justify-content' or 'align-content' property
945+ instead reference the value of the 'justify-content' or 'align-content' property
945946 (whichever is defined to apply to the <a>static-position containing block</a> ’s <a>inline axis</a> ),
946947 treating ''justify-content/normal'' as ''start''
947948 and any <a>distributed alignment</a> value as its <a>fallback alignment</a> .
@@ -952,16 +953,28 @@ The 'justify-content' and 'align-content' Properties</h3>
952953 apply the rules for ''direction: rtl'' ;
953954 etc.
954955
956+ Fundamentally these rules set one of the ''left/auto'' insets
957+ (by default, the start-edge inset)
958+ to the corresponding edge of the <a>static position rectangle</a>
959+ and the other to the corresponding edge of the <a>containing block</a>
960+ (i.e. set the inset to zero).
955961 For the case of ''justify-content/center'' (or its equivalent),
956962 split the difference:
957963 when both 'inset-inline-start' and 'inset-inline-end'
958964 ('left' and 'right' in horizontal LTR <a>writing modes</a> )
959965 are ''left/auto'' ,
960- set each to its <a>static position</a> ,
961- and if the resulting “shrink-to-fit” <a>inline size</a> conflicts,
962- re-solve the equation for 'inset-inline-end' .
963-
964- Note: What this means is that,
966+ set both sides to match the <a>static position</a> .
967+ The absolutely-positioned box is then sized into
968+ the resulting space (floored at zero).
969+
970+ Note: The 'align-self' /'justify-self' properties
971+ additionally modify the sizing and positioning rules
972+ specified in [[!CSS2]] .
973+ For example, ''justify-self: stretch'' will replace
974+ shrink-to-fit sizing with <a>stretch-fit</a> sizing.
975+
976+ <div class="example">
977+ What this means is that,
965978 instead of always sizing an absolutely-positioned element
966979 within the available space between
967980 its inline-start <a>static position</a>
@@ -973,6 +986,19 @@ The 'justify-content' and 'align-content' Properties</h3>
973986 by changing the <a>static-position containing block</a> ’s
974987 <a>content-distribution properties</a> .
975988
989+ <pre>
990+ ###############################################
991+ # abspos containing block #
992+ # +----------------------------------+ #
993+ # | staticpos containing block | #
994+ # | | #
995+ #
2B0
| | #
996+ #<--|start-align available space --> | #
997+ # |<----- end-align available space -|--> #
998+ # |<- center-align available space ->| #
999+ </pre>
1000+ </div>
1001+
9761002### Multicol Containers ### {#distribution-multicol}
9771003
9781004 <table class="data align-details">
0 commit comments