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

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.

Example:

<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>
</div>

Hope that helps, Phil

Received on Thursday, 24 May 2012 23:35:47 UTC