- From: Andrew Fedoniouk <news@terrainformatica.com>
- Date: Sun, 12 Apr 2009 19:09:26 -0700
- To: robert@ocallahan.org
- CC: David Hyatt <hyatt@apple.com>, www-style <www-style@w3.org>
Robert O'Callahan wrote: > On Mon, Apr 13, 2009 at 12:44 PM, Andrew Fedoniouk > <news@terrainformatica.com <mailto:news@terrainformatica.com>> wrote: > > How this > > #A { width: 200px; box-flex: 1; } > > is different from this: > > #A { min-width: 200px; width:1*; } > > ? > > > I thought my example was pretty clear already. But anyway, compare > #A { width: 200px; box-flex: 1; } > #B { width: 100px; box-flex: 1; } > to > #A { min-width: 200px; width:1*; } > #B { min-width: 100px; width:1*; } > in a container of width 400px. In the box-flex case, A and B get widths > 250px and 150px. In the width:1* case, A and B both get width 200px. Got it, thanks. But why do you need that box-flex there? As far as I understand that is the case for the calc() then: #A { width: calc(200px + (100% - 300px) / 2); } #B { width: calc(100px + (100% - 300px) / 2); } Flexes are needed when you want to take intrinsic widths or min/max constraints into account. In your expression: #A { width: 200px; box-flex: 1; } the width defines something that is really different from meaning of the width in CSS and this really what caused problems in understanding it on my side. I suspect that I am not alone. -- Andrew Fedoniouk. http://terrainformatica.com
Received on Monday, 13 April 2009 02:10:02 UTC