[css3-flexbox] Per WG resolution, revert min-width/height back to 0. Adjust examples as appropriate, and add note recommending using it manually.
authorTab Atkins Jr. <jackalmage@gmail.com>
Thu, 14 Mar 2013 14:54:35 -0700
changeset 77459437131b3d6e
parent 7744 e987b5da1953
child 7746 c63e994df5a4
[css3-flexbox] Per WG resolution, revert min-width/height back to 0. Adjust examples as appropriate, and add note recommending using it manually.
css3-flexbox/Overview.html
css3-flexbox/Overview.src.html
     1.1 --- a/css3-flexbox/Overview.html	Thu Mar 14 14:33:28 2013 -0700
     1.2 +++ b/css3-flexbox/Overview.html	Thu Mar 14 14:54:35 2013 -0700
     1.3 @@ -11,7 +11,7 @@
     1.4  
     1.5    <meta content="CSS Flexible Box Layout Module" name=dcterms.title>
     1.6    <meta content=text name=dcterms.type>
     1.7 -  <meta content=2013-03-05 name=dcterms.issued>
     1.8 +  <meta content=2013-03-14 name=dcterms.issued>
     1.9    <meta content="http://dev.w3.org/csswg/css3-flexbox/" name=dcterms.creator>
    1.10    <meta content=W3C name=dcterms.publisher>
    1.11    <meta content="http://dev.w3.org/csswg/css3-flexbox/"
    1.12 @@ -219,11 +219,11 @@
    1.13     <h1 class=p-name id=head-box-flexible>CSS Flexible Box Layout Module</h1>
    1.14  
    1.15     <h2 class="no-num no-toc" id=w3c-working>Editor's Draft, <time
    1.16 -    class=dt-updated datetime=20130305> 5 March 2013</time></h2>
    1.17 +    class=dt-updated datetime=20130314>14 March 2013</time></h2>
    1.18  
    1.19     <dl>
    1.20      <dt>This version:
    1.21 -     <!--<dd><a class="u-url" href="http://dev.w3.org/csswg/css3-flexbox/">http://www.w3.org/TR/2013/CR-css3-flexbox-20130305/</a>-->
    1.22 +     <!--<dd><a class="u-url" href="http://dev.w3.org/csswg/css3-flexbox/">http://www.w3.org/TR/2013/CR-css3-flexbox-20130314/</a>-->
    1.23  
    1.24      <dd><a class=u-url
    1.25       href="http://dev.w3.org/csswg/css3-flexbox/">http://dev.w3.org/csswg/css3-flexbox/</a>
    1.26 @@ -343,20 +343,22 @@
    1.27     “css3-flexbox” in the subject, preferably like this:
    1.28     “[<!---->css3-flexbox<!---->] <em>…summary of comment…</em>”
    1.29  
    1.30 -  <p>This document was produced by the <a href="/Style/CSS/members">CSS
    1.31 -   Working Group</a> (part of the <a href="/Style/">Style Activity</a>).
    1.32 +  <p>This document was produced by the <a
    1.33 +   href="http://www.w3.org/Style/CSS/members">CSS Working Group</a> (part of
    1.34 +   the <a href="http://www.w3.org/Style/">Style Activity</a>).
    1.35  
    1.36    <p>This document was produced by a group operating under the <a
    1.37 -   href="/Consortium/Patent-Policy-20040205/">5 February 2004 W3C Patent
    1.38 -   Policy</a>. W3C maintains a <a href="/2004/01/pp-impl/32061/status"
    1.39 +   href="http://www.w3.org/Consortium/Patent-Policy-20040205/">5 February
    1.40 +   2004 W3C Patent Policy</a>. W3C maintains a <a
    1.41 +   href="http://www.w3.org/2004/01/pp-impl/32061/status"
    1.42     rel=disclosure>public list of any patent disclosures</a> made in
    1.43     connection with the deliverables of the group; that page also includes
    1.44     instructions for disclosing a patent. An individual who has actual
    1.45     knowledge of a patent which the individual believes contains <a
    1.46 -   href="/Consortium/Patent-Policy-20040205/#def-essential">Essential
    1.47 +   href="http://www.w3.org/Consortium/Patent-Policy-20040205/#def-essential">Essential
    1.48     Claim(s)</a> must disclose the information in accordance with <a
    1.49 -   href="/Consortium/Patent-Policy-20040205/#sec-Disclosure">section 6 of the
    1.50 -   W3C Patent Policy</a>.</p>
    1.51 +   href="http://www.w3.org/Consortium/Patent-Policy-20040205/#sec-Disclosure">section
    1.52 +   6 of the W3C Patent Policy</a>.</p>
    1.53    <!--end-status-->
    1.54  
    1.55    <p>The CR period will last at least until 20 March 2013. At the time of
    1.56 @@ -410,9 +412,6 @@
    1.57  
    1.58       <li><a href="#visibility-collapse"><span class=secno>4.4. </span>
    1.59        Collapsed Items</a>
    1.60 -
    1.61 -     <li><a href="#min-size-auto"><span class=secno>4.5. </span> Implied
    1.62 -      Minimum Size of Flex Items</a>
    1.63      </ul>
    1.64  
    1.65     <li><a href="#flow-order"><span class=secno>5. </span> Ordering and
    1.66 @@ -740,11 +739,10 @@
    1.67     class=property>display</code>’ property <a href="#CSS21"
    1.68     rel=biblioentry>[CSS21]<!--{{!CSS21}}--></a>, adding a new block-level and
    1.69     new inline-level display type, and defining a new type of formatting
    1.70 -   context along with properties to control its layout. It also defines a new
    1.71 -   initial value for ‘<code class=property>min-width</code>’ and ‘<code
    1.72 -   class=property>min-height</code>’. None of the properties defined in
    1.73 -   this module apply to the ‘<code class=css>::first-line</code>’ or
    1.74 -   ‘<code class=css>::first-letter</code>’ pseudo-elements.
    1.75 +   context along with properties to control its layout. None of the
    1.76 +   properties defined in this module apply to the ‘<code
    1.77 +   class=css>::first-line</code>’ or ‘<code
    1.78 +   class=css>::first-letter</code>’ pseudo-elements.
    1.79  
    1.80    <h3 id=values><span class=secno>1.3. </span> Values</h3>
    1.81  
    1.82 @@ -1248,76 +1246,6 @@
    1.83     class=css>visibility: collapse</code>’ is still recommended for dynamic
    1.84     cases.)
    1.85  
    1.86 -  <h3 id=min-size-auto><span class=secno>4.5. </span> Implied Minimum Size of
    1.87 -   Flex Items</h3>
    1.88 -
    1.89 -  <p> To provide a more reasonable default minimum size for flex items, this
    1.90 -   specification introduces a new <a href="#min-auto">‘<code
    1.91 -   class=css>auto</code>’</a> value as the initial value of the ‘<code
    1.92 -   class=property>min-width</code>’ and ‘<code
    1.93 -   class=property>min-height</code>’ properties defined in CSS 2.1. <a
    1.94 -   href="#CSS21" rel=biblioentry>[CSS21]<!--{{!CSS21}}--></a>
    1.95 -
    1.96 -  <table class=propdef>
    1.97 -   <tbody>
    1.98 -    <tr>
    1.99 -     <th>Name:
   1.100 -
   1.101 -     <td>min-width, min-height
   1.102 -
   1.103 -    <tr>
   1.104 -     <th><a href="#values">New value</a>:
   1.105 -
   1.106 -     <td>auto
   1.107 -
   1.108 -    <tr>
   1.109 -     <th>New Initial Value:
   1.110 -
   1.111 -     <td><a href="#min-auto"><strong
   1.112 -      title="min-width/height:auto">auto</strong></a>
   1.113 -
   1.114 -    <tr>
   1.115 -     <th>New Computed Value:
   1.116 -
   1.117 -     <td>the percentage as specified or the absolute length or a keyword
   1.118 -  </table>
   1.119 -
   1.120 -  <dl>
   1.121 -   <dt><dfn id=min-auto title="min-width/height:auto">auto</dfn>
   1.122 -
   1.123 -   <dd> When used as the value of a flex item's min main size property, this
   1.124 -    keyword indicates a minimum of the min-content size, to help ensure that
   1.125 -    the item is large enough to fit its contents.
   1.126 -    <p class=note> It is intended that this will compute to the ‘<code
   1.127 -     class=css>min-content</code>’ keyword when the specification defining
   1.128 -     it (<a
   1.129 -     href="http://www.w3.org/TR/css3-writing-modes/#intrinsic-sizing">Writing
   1.130 -     Modes Appendix D</a>) is sufficiently mature.
   1.131 -
   1.132 -    <p> Otherwise, this keyword computes to ‘<code class=css>0</code>’
   1.133 -     (unless otherwise defined by a future specification).
   1.134 -  </dl>
   1.135 -
   1.136 -  <div class=note id=min-size-opt>
   1.137 -   <p> Note that while a content-based minimum size is often appropriate, and
   1.138 -    helps prevent content from overlapping or spilling outside its container,
   1.139 -    in some cases it is not:
   1.140 -
   1.141 -   <p> In particular, if flex sizing is being used for a major content area
   1.142 -    of a document, it is better to set an explicit font-relative minimum
   1.143 -    width such as ‘<code class=css>min-width: 12em</code>’. A
   1.144 -    content-based minimum width could result in a large table or large image
   1.145 -    stretching the size of the entire content area into an overflow zone, and
   1.146 -    thereby making lines of text gratuitously long and hard to read.
   1.147 -
   1.148 -   <p> Note also, when content-based sizing is used on an item with large
   1.149 -    amounts of content, the layout engine must traverse all of this content
   1.150 -    before finding its minimum size, whereas if the author sets an explicit
   1.151 -    minimum, this is not necessary. (For items with small amounts of content,
   1.152 -    however, this traversal is trivial and therefore not a performance
   1.153 -    concern.)
   1.154 -  </div>
   1.155 -
   1.156    <h2 id=flow-order><span class=secno>5. </span> Ordering and Orientation</h2>
   1.157  
   1.158    <p> The contents of a flex container can be laid out in any direction and
   1.159 @@ -1753,6 +1681,10 @@
   1.160  .tabs {
   1.161  	display: flex;
   1.162  }
   1.163 +.tabs > * {
   1.164 +	min-width: min-content;
   1.165 +	/* Prevent tabs from getting too small for their content. */
   1.166 +}
   1.167  .tabs > .current {
   1.168  	order: -1; /* Lower than the default of 0 */
   1.169  }</pre>
   1.170 @@ -1825,9 +1757,9 @@
   1.171  
   1.172     <pre>
   1.173  #main { display: flex; }
   1.174 -#main > article { flex:1;         order: 2; }
   1.175 -#main > nav     { width: 200px;   order: 1; }
   1.176 -#main > aside   { width: 200px;   order: 3; }</pre>
   1.177 +#main > article { order: 2; min-width: 12em; flex:1; }
   1.178 +#main > nav     { order: 1; width: 200px; }
   1.179 +#main > aside   { order: 3; width: 200px; }</pre>
   1.180  
   1.181     <p> As an added bonus, the columns will all be <a
   1.182      href="#align-stretch">equal-height</a> by default, and the main content
   1.183 @@ -2118,9 +2050,9 @@
   1.184      properties. (If the item's <a href="#main-size-property"><i>main size
   1.185      property</i></a> computes to ‘<code class=css>auto</code>’, this will
   1.186      size the flex item based on its contents.) Makes the flex item inflexible
   1.187 -    when there is positive free space, but allows it to shrink to its <a
   1.188 -    href="#min-size-auto">minimum</a> when there is insufficient space. The
   1.189 -    <a href="#alignment">alignment abilities</a> or <a
   1.190 +    when there is positive free space, but allows it to shrink to its
   1.191 +    min-size when there is insufficient space. The <a
   1.192 +    href="#alignment">alignment abilities</a> or <a
   1.193      href="#auto-margins">‘<code class=css>auto</code>’ margins</a> can be
   1.194      used to align flex items along the <a href="#main-axis"><i>main
   1.195      axis</i></a>.
   1.196 @@ -2156,11 +2088,14 @@
   1.197      sizes will be proportional to the specified flex factor.
   1.198    </dl>
   1.199  
   1.200 -  <p> By default, flex items won't shrink below their minimum content size
   1.201 -   (the length of the longest word or fixed-size element). To change this,
   1.202 -   set the ‘<code class=property>min-width</code>’ or ‘<code
   1.203 -   class=property>min-height</code>’ property. (See <a
   1.204 -   href="#min-size-auto">Implied Minimum Size of Flex Items</a>.)
   1.205 +  <div class=note> Note that, because flex items typically can shrink, it is
   1.206 +   often recommended that a minimum main size be set (with ‘<code
   1.207 +   class=property>min-width</code>’ or ‘<code
   1.208 +   class=property>min-height</code>’) to prevent them from shrinking too
   1.209 +   small to fit their contents. This problem is especially common with
   1.210 +   horizontal navigation or toolbars.
   1.211 +   <pre>nav li { flex: 1; min-width: min-content; /* Don't overflow */}</pre>
   1.212 +  </div>
   1.213  
   1.214    <h3 id=flex-components><span class=secno>7.3. </span> Components of
   1.215     Flexibility</h3>
   1.216 @@ -2442,6 +2377,10 @@
   1.217  nav > ul {
   1.218  	display: flex;
   1.219  }
   1.220 +nav > ul > li {
   1.221 +	min-width: min-content;
   1.222 +	/* Prevent items from getting too small for their content. */
   1.223 +}
   1.224  nav > ul > #login {
   1.225  	margin-left: auto;
   1.226  }
   1.227 @@ -4399,9 +4338,6 @@
   1.228     <li>main-start, <a href="#main-start"
   1.229      title="section 2."><strong>2.</strong></a>
   1.230  
   1.231 -   <li>min-width/height:auto, <a href="#min-auto"
   1.232 -    title="section 4.5."><strong>4.5.</strong></a>
   1.233 -
   1.234     <li>multi-line, <a href="#multi-line"
   1.235      title="section 6."><strong>6.</strong></a>
   1.236  
     2.1 --- a/css3-flexbox/Overview.src.html	Thu Mar 14 14:33:28 2013 -0700
     2.2 +++ b/css3-flexbox/Overview.src.html	Thu Mar 14 14:54:35 2013 -0700
     2.3 @@ -444,7 +444,6 @@
     2.4  		adding a new block-level and new inline-level display type,
     2.5  		and defining a new type of formatting context
     2.6  		along with properties to control its layout.
     2.7 -		It also defines a new initial value for 'min-width' and 'min-height'.
     2.8  		None of the properties defined in this module apply to the ''::first-line'' or ''::first-letter'' pseudo-elements.
     2.9  
    2.10  <h3 id="values">
    2.11 @@ -889,67 +888,6 @@
    2.12  		(Since only part of the steps need to be repeated when 'visibility' is changed,
    2.13  		however, 'visibility: collapse' is still recommended for dynamic cases.)
    2.14  
    2.15 -<h3 id='min-size-auto'>
    2.16 -Implied Minimum Size of Flex Items</h3>
    2.17 -
    2.18 -	<p>
    2.19 -		To provide a more reasonable default minimum size for flex items,
    2.20 -		this specification introduces a new <a href="#min-auto">''auto''</a> value as the initial value
    2.21 -		of the 'min-width' and 'min-height' properties
    2.22 -		defined in CSS 2.1. [[!CSS21]]
    2.23 -
    2.24 -	<table class="propdef">
    2.25 -		<tr>
    2.26 -			<th>Name:
    2.27 -			<td>min-width, min-height
    2.28 -		<tr>
    2.29 -			<th><a href="#values">New value</a>:
    2.30 -			<td>auto
    2.31 -		<tr>
    2.32 -			<th>New Initial Value:
    2.33 -			<td><strong title="min-width/height:auto">auto</strong>
    2.34 -		<tr>
    2.35 -			<th>New Computed Value:
    2.36 -			<td>the percentage as specified or the absolute length or a keyword
    2.37 -	</table>
    2.38 -
    2.39 -	<dl>
    2.40 -		<dt><dfn title="min-width/height:auto" id='min-auto'>auto</dfn>
    2.41 -		<dd>
    2.42 -			When used as the value of a flex item's min main size property,
    2.43 -			this keyword indicates a minimum of the min-content size,
    2.44 -			to help ensure that the item is large enough to fit its contents.
    2.45 -
    2.46 -			<p class='note'>
    2.47 -				It is intended that this will compute to the ''min-content'' keyword
    2.48 -				when the specification defining it (<a href="http://www.w3.org/TR/css3-writing-modes/#intrinsic-sizing">Writing Modes Appendix D</a>) is sufficiently mature.
    2.49 -
    2.50 -			<p>
    2.51 -				Otherwise,
    2.52 -				this keyword computes to ''0''
    2.53 -				(unless otherwise defined by a future specification).
    2.54 -	</dl>
    2.55 -
    2.56 -	<div class="note" id="min-size-opt">
    2.57 -		<p>
    2.58 -			Note that while a content-based minimum size is often appropriate,
    2.59 -			and helps prevent content from overlapping or spilling outside its container,
    2.60 -			in some cases it is not:
    2.61 -
    2.62 -		<p>
    2.63 -			In particular, if flex sizing is being used for a major content area of a document,
    2.64 -			it is better to set an explicit font-relative minimum width such as ''min-width: 12em''.
    2.65 -			A content-based minimum width could result in a large table or large image
    2.66 -			stretching the size of the entire content area into an overflow zone,
    2.67 -			and thereby making lines of text gratuitously long and hard to read.
    2.68 -
    2.69 -		<p>
    2.70 -			Note also, when content-based sizing is used on an item with large amounts of content,
    2.71 -			the layout engine must traverse all of this content before finding its minimum size,
    2.72 -			whereas if the author sets an explicit minimum, this is not necessary.
    2.73 -			(For items with small amounts of content, however,
    2.74 -			this traversal is trivial and therefore not a performance concern.)
    2.75 -	</div>
    2.76  
    2.77  <h2 id="flow-order">
    2.78  Ordering and Orientation</h2>
    2.79 @@ -1261,6 +1199,10 @@
    2.80  .tabs {
    2.81  	display: flex;
    2.82  }
    2.83 +.tabs > * {
    2.84 +	min-width: min-content;
    2.85 +	/* Prevent tabs from getting too small for their content. */
    2.86 +}
    2.87  .tabs > .current {
    2.88  	order: -1; /* Lower than the default of 0 */
    2.89  }</pre>
    2.90 @@ -1331,9 +1273,9 @@
    2.91  
    2.92  		<pre>
    2.93  #main { display: flex; }
    2.94 -#main > article { flex:1;         order: 2; }
    2.95 -#main > nav     { width: 200px;   order: 1; }
    2.96 -#main > aside   { width: 200px;   order: 3; }</pre>
    2.97 +#main > article { order: 2; min-width: 12em; flex:1; }
    2.98 +#main > nav     { order: 1; width: 200px; }
    2.99 +#main > aside   { order: 3; width: 200px; }</pre>
   2.100  		
   2.101  		<p>
   2.102  			As an added bonus, 
   2.103 @@ -1589,7 +1531,7 @@
   2.104  			(If the item's <i>main size property</i> computes to ''auto'',
   2.105  			this will size the flex item based on its contents.)
   2.106  			Makes the flex item inflexible when there is positive free space,
   2.107 -			but allows it to shrink to its <a href="#min-size-auto">minimum</a> when there is insufficient space.
   2.108 +			but allows it to shrink to its min-size when there is insufficient space.
   2.109  			The <a href="#alignment">alignment abilities</a> or <a href="#auto-margins">''auto'' margins</a>
   2.110  			can be used to align flex items along the <i>main axis</i>.
   2.111  
   2.112 @@ -1619,11 +1561,15 @@
   2.113  			their sizes will be proportional to the specified flex factor.
   2.114  	</dl>
   2.115  
   2.116 -	<p>
   2.117 -		By default, flex items won't shrink below their minimum content size
   2.118 -		(the length of the longest word or fixed-size element).
   2.119 -		To change this, set the 'min-width' or 'min-height' property.
   2.120 -		(See <a href="#min-size-auto">Implied Minimum Size of Flex Items</a>.)
   2.121 +	<div class='note'>
   2.122 +		Note that, because flex items typically can shrink,
   2.123 +		it is often recommended that a minimum main size be set
   2.124 +		(with 'min-width' or 'min-height')
   2.125 +		to prevent them from shrinking too small to fit their contents.
   2.126 +		This problem is especially common with horizontal navigation or toolbars.
   2.127 +
   2.128 +		<pre>nav li { flex: 1; min-width: min-content; /* Don't overflow */}</pre>
   2.129 +	</div>
   2.130  
   2.131  <h3 id='flex-components'>
   2.132  Components of Flexibility</h3>
   2.133 @@ -1839,6 +1785,10 @@
   2.134  nav > ul {
   2.135  	display: flex;
   2.136  }
   2.137 +nav > ul > li {
   2.138 +	min-width: min-content;
   2.139 +	/* Prevent items from getting too small for their content. */
   2.140 +}
   2.141  nav > ul > #login {
   2.142  	margin-left: auto;
   2.143  }