Skip to content

Commit 4645830

Browse files
committed
Added better detail to the section describing how to resolve flexible lengths.
1 parent 34779c7 commit 4645830

2 files changed

Lines changed: 26 additions & 10 deletions

File tree

css3-flexbox/Overview.html

Lines changed: 21 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -16,12 +16,12 @@
1616

1717
<h1 id=head-box-flexible>CSS Flexible Box Layout Module</h1>
1818

19-
<h2 class="no-num no-toc" id=w3c-working>Editor's Draft, 19 September 2011</h2>
19+
<h2 class="no-num no-toc" id=w3c-working>Editor's Draft, 30 September 2011</h2>
2020

2121
<dl>
2222
<dt>This version:
2323

24-
<dd><!-- <a href="http://www.w3.org/TR/2011/WD-css3-flexbox-20110919/">http://www.w3.org/TR/2011/WD-css3-flexbox-20110919/</a></dd> -->
24+
<dd><!-- <a href="http://www.w3.org/TR/2011/WD-css3-flexbox-20110930/">http://www.w3.org/TR/2011/WD-css3-flexbox-20110930/</a></dd> -->
2525
<a
2626
href="http://dev.w3.org/csswg/css3-flexbox/">http://dev.w3.org/csswg/css3-flexbox/</a>
2727

@@ -834,15 +834,27 @@ <h3 id=resolving-flexible-lengths><span class=secno>4.2. </span> Resolving
834834
href="#flexible-length0"><i>flexible lengths</i></a> in proportion to
835835
their <a href="#negative-flexibility"><i>negative flexibility</i></a>.
836836

837-
<li>If any <a href="#flexible-length0"><i>flexible length</i></a> is
838-
violating a min or max width or height constraint, change it into an
839-
inflexible length that's not violating the constraint, then go back to
840-
the previous step. Keep repeating this until either there are no <a
841-
href="#flexible-length0"><i>flexible lengths</i></a> left, or every <a
842-
href="#flexible-length0"><i>flexible length</i></a> has successfully
843-
resolved without violating any constraints.
837+
<li>If there's free space and any <a href="#flexible-length0"><i>flexible
838+
lengths</i></a> are violating a max width or height constraint, change
839+
them into the largest inflexible length that doesn't violate their
840+
constraint and return to step 2. If the flexbox is overflowing and any <a
841+
href="#flexible-length0"><i>flexible lengths</i></a> are violating a min
842+
width or height constraint, change them into the smallest inflexible
843+
length that doesn't violate their constraint and return to step 2.
844+
845+
<li>If there's free space and any <a href="#flexible-length0"><i>flexible
846+
lengths</i></a> are violating a min width or height constraint, change
847+
them into the smallest inflexible length that doesn't violate their
848+
constraint and return to step 2. If the flexbox is overflowing and any <a
849+
href="#flexible-length0"><i>flexible lengths</i></a> are violating a max
850+
width or height constraint, change them into the largest inflexible
851+
length that doesn't violate their constraint and return to step 2.
844852
</ol>
845853

854+
<p class=issue>This is too much detail for a non-normative section. This is
855+
living here only until I flesh out the layout algorithm section. Then this
856+
can return to being a fairly simple explanation of what goes on.
857+
846858
<p>If a flexible length is used in a context where it is not allowed (for
847859
example, on the &lsquo;<code class=property>width</code>&rsquo; property
848860
of an element that is not a <a href="#flexbox-item"><i>flexbox

css3-flexbox/Overview.src.html

Lines changed: 5 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -365,9 +365,13 @@ <h3 id='resolving-flexible-lengths'>
365365

366366
<li>If there's free space, distribute it among the <i>flexible lengths</i> in proportion to their <i>positive flexibility</i>. If the flexbox is overflowing, shrink the <i>flexible lengths</i> in proportion to their <i>negative flexibility</i>.</li>
367367

368-
<li>If any <i>flexible length</i> is violating a min or max width or height constraint, change it into an inflexible length that's not violating the constraint, then go back to the previous step. Keep repeating this until either there are no <i>flexible lengths</i> left, or every <i>flexible length</i> has successfully resolved without violating any constraints.</li>
368+
<li>If there's free space and any <i>flexible lengths</i> are violating a max width or height constraint, change them into the largest inflexible length that doesn't violate their constraint and return to step 2. If the flexbox is overflowing and any <i>flexible lengths</i> are violating a min width or height constraint, change them into the smallest inflexible length that doesn't violate their constraint and return to step 2.</li>
369+
370+
<li>If there's free space and any <i>flexible lengths</i> are violating a min width or height constraint, change them into the smallest inflexible length that doesn't violate their constraint and return to step 2. If the flexbox is overflowing and any <i>flexible lengths</i> are violating a max width or height constraint, change them into the largest inflexible length that doesn't violate their constraint and return to step 2.</li>
369371
</ol>
370372

373+
<p class='issue'>This is too much detail for a non-normative section. This is living here only until I flesh out the layout algorithm section. Then this can return to being a fairly simple explanation of what goes on.</p>
374+
371375
<p>If a flexible length is used in a context where it is not allowed (for example, on the 'width' property of an element that is not a <i>flexbox item</i>), it represents its <i>preferred size</i>. Authors must not use flexible lengths in contexts where they are not allowed.</p>
372376

373377
<p class='issue'>Examples!</p>

0 commit comments

Comments
 (0)