W3C home > Mailing lists > Public > www-style@w3.org > May 2012

RE: [css3-flexbox] flex-basis initial value should be 0px

From: Phil Cupp <pcupp@microsoft.com>
Date: Thu, 24 May 2012 23:34:21 +0000
To: fantasai <fantasai.lists@inkedblade.net>, "www-style@w3.org" <www-style@w3.org>
Message-ID: <9BFF145D69548148BC2B26C0C9EE103306C2D415@SN2PRD0310MB396.namprd03.prod.outlook.com>
On May 23, 2012 at 2:58 PM, fantasai wrote:
>> On Wed, May 23, 2012 at 11:04 AM, Tony Chang<tony@chromium.org>  wrote:
>> Note that the grid only gets "messed up" if the screen is small enough 
>> to make some of the items less than their min-size.  min-size only has 
>> an effect when an item tries to shrink below it; during normal flexing 
>> it has no effect.
> (Phil or dholbert can correct me if I'm wrong, but IIRC, Grid also honors min-content sizes in most cases.)

Min-content comes into play for a grid item any time its alignment is not stretch (stretch is the default alignment) as the grid item will be shrink-to-fit sized into its grid cell and then aligned.  Min-content also affects the size of the track (and therefore the size of any box that is stretch aligned over that track) when the track has a sizing function that uses one of the *-content keywords, e.g. minmax(min-content, 1fr) or auto which is equivalent to minmax(min-content, max-content).

If you have tracks sized to a certain length (or fraction or percentage on a non-auto sized grid element) and the grid item contained in a cell covering those tracks has stretch alignment, then the min-content size plays no part in determining the final size of the item's box.


<div style="display:grid;-ms-grid-columns:1fr;-ms-grid-rows:1fr;width:10px;height:10px">
    <div>I'm a grid item.  My box is ten pixels by ten pixels even if that causes my own contents to overflow my box.</div>

Hope that helps, Phil
Received on Thursday, 24 May 2012 23:35:47 UTC

This archive was generated by hypermail 2.4.0 : Friday, 25 March 2022 10:08:16 UTC