1.1 --- a/css3-flexbox/Overview.src.html Thu Mar 14 14:33:28 2013 -0700
1.2 +++ b/css3-flexbox/Overview.src.html Thu Mar 14 14:54:35 2013 -0700
1.3 @@ -444,7 +444,6 @@
1.4 adding a new block-level and new inline-level display type,
1.5 and defining a new type of formatting context
1.6 along with properties to control its layout.
1.7 - It also defines a new initial value for 'min-width' and 'min-height'.
1.8 None of the properties defined in this module apply to the ''::first-line'' or ''::first-letter'' pseudo-elements.
1.9
1.10 <h3 id="values">
1.11 @@ -889,67 +888,6 @@
1.12 (Since only part of the steps need to be repeated when 'visibility' is changed,
1.13 however, 'visibility: collapse' is still recommended for dynamic cases.)
1.14
1.15 -<h3 id='min-size-auto'>
1.16 -Implied Minimum Size of Flex Items</h3>
1.17 -
1.18 - <p>
1.19 - To provide a more reasonable default minimum size for flex items,
1.20 - this specification introduces a new <a href="#min-auto">''auto''</a> value as the initial value
1.21 - of the 'min-width' and 'min-height' properties
1.22 - defined in CSS 2.1. [[!CSS21]]
1.23 -
1.24 - <table class="propdef">
1.25 - <tr>
1.26 - <th>Name:
1.27 - <td>min-width, min-height
1.28 - <tr>
1.29 - <th><a href="#values">New value</a>:
1.30 - <td>auto
1.31 - <tr>
1.32 - <th>New Initial Value:
1.33 - <td><strong title="min-width/height:auto">auto</strong>
1.34 - <tr>
1.35 - <th>New Computed Value:
1.36 - <td>the percentage as specified or the absolute length or a keyword
1.37 - </table>
1.38 -
1.39 - <dl>
1.40 - <dt><dfn title="min-width/height:auto" id='min-auto'>auto</dfn>
1.41 - <dd>
1.42 - When used as the value of a flex item's min main size property,
1.43 - this keyword indicates a minimum of the min-content size,
1.44 - to help ensure that the item is large enough to fit its contents.
1.45 -
1.46 - <p class='note'>
1.47 - It is intended that this will compute to the ''min-content'' keyword
1.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.
1.49 -
1.50 - <p>
1.51 - Otherwise,
1.52 - this keyword computes to ''0''
1.53 - (unless otherwise defined by a future specification).
1.54 - </dl>
1.55 -
1.56 - <div class="note" id="min-size-opt">
1.57 - <p>
1.58 - Note that while a content-based minimum size is often appropriate,
1.59 - and helps prevent content from overlapping or spilling outside its container,
1.60 - in some cases it is not:
1.61 -
1.62 - <p>
1.63 - In particular, if flex sizing is being used for a major content area of a document,
1.64 - it is better to set an explicit font-relative minimum width such as ''min-width: 12em''.
1.65 - A content-based minimum width could result in a large table or large image
1.66 - stretching the size of the entire content area into an overflow zone,
1.67 - and thereby making lines of text gratuitously long and hard to read.
1.68 -
1.69 - <p>
1.70 - Note also, when content-based sizing is used on an item with large amounts of content,
1.71 - the layout engine must traverse all of this content before finding its minimum size,
1.72 - whereas if the author sets an explicit minimum, this is not necessary.
1.73 - (For items with small amounts of content, however,
1.74 - this traversal is trivial and therefore not a performance concern.)
1.75 - </div>
1.76
1.77 <h2 id="flow-order">
1.78 Ordering and Orientation</h2>
1.79 @@ -1261,6 +1199,10 @@
1.80 .tabs {
1.81 display: flex;
1.82 }
1.83 +.tabs > * {
1.84 + min-width: min-content;
1.85 + /* Prevent tabs from getting too small for their content. */
1.86 +}
1.87 .tabs > .current {
1.88 order: -1; /* Lower than the default of 0 */
1.89 }</pre>
1.90 @@ -1331,9 +1273,9 @@
1.91
1.92 <pre>
1.93 #main { display: flex; }
1.94 -#main > article { flex:1; order: 2; }
1.95 -#main > nav { width: 200px; order: 1; }
1.96 -#main > aside { width: 200px; order: 3; }</pre>
1.97 +#main > article { order: 2; min-width: 12em; flex:1; }
1.98 +#main > nav { order: 1; width: 200px; }
1.99 +#main > aside { order: 3; width: 200px; }</pre>
1.100
1.101 <p>
1.102 As an added bonus,
1.103 @@ -1589,7 +1531,7 @@
1.104 (If the item's <i>main size property</i> computes to ''auto'',
1.105 this will size the flex item based on its contents.)
1.106 Makes the flex item inflexible when there is positive free space,
1.107 - but allows it to shrink to its <a href="#min-size-auto">minimum</a> when there is insufficient space.
1.108 + but allows it to shrink to its min-size when there is insufficient space.
1.109 The <a href="#alignment">alignment abilities</a> or <a href="#auto-margins">''auto'' margins</a>
1.110 can be used to align flex items along the <i>main axis</i>.
1.111
1.112 @@ -1619,11 +1561,15 @@
1.113 their sizes will be proportional to the specified flex factor.
1.114 </dl>
1.115
1.116 - <p>
1.117 - By default, flex items won't shrink below their minimum content size
1.118 - (the length of the longest word or fixed-size element).
1.119 - To change this, set the 'min-width' or 'min-height' property.
1.120 - (See <a href="#min-size-auto">Implied Minimum Size of Flex Items</a>.)
1.121 + <div class='note'>
1.122 + Note that, because flex items typically can shrink,
1.123 + it is often recommended that a minimum main size be set
1.124 + (with 'min-width' or 'min-height')
1.125 + to prevent them from shrinking too small to fit their contents.
1.126 + This problem is especially common with horizontal navigation or toolbars.
1.127 +
1.128 + <pre>nav li { flex: 1; min-width: min-content; /* Don't overflow */}</pre>
1.129 + </div>
1.130
1.131 <h3 id='flex-components'>
1.132 Components of Flexibility</h3>
1.133 @@ -1839,6 +1785,10 @@
1.134 nav > ul {
1.135 display: flex;
1.136 }
1.137 +nav > ul > li {
1.138 + min-width: min-content;
1.139 + /* Prevent items from getting too small for their content. */
1.140 +}
1.141 nav > ul > #login {
1.142 margin-left: auto;
1.143 }
