0

I made a small demo http://html5.by/blogdemo/flexbox/flex-grow-shrink-basis-stackoverflow.html

there are 2 flex items in flex container

  1. flex: 1 2 1000px;
  2. flex: 1 1 100px;

absolute width of flex container - 500px;

finally, you can see, that width of flex elements are:

  1. 421px
  2. 79px

My question: Is there a way to mathematically describe calculated sizes (with formula)?

Nedudi
  • 5,639
  • 2
  • 42
  • 37
  • 1
    Possible duplicate: http://stackoverflow.com/questions/15927302/flex-not-showing-correctly-in-ie-or-chrome or http://stackoverflow.com/questions/14224732/in-what-circumstances-flex-shrink-is-applied-to-the-flex-elements-and-how-it-wor – cimmanon Feb 06 '14 at 02:02
  • Well, the topic is the same, and logically it's described somehow, but I am waiting more for mathematical formula that describes browser logic, for given values and final sizes – Nedudi Feb 06 '14 at 07:18
  • The first one I linked to seems to have a mathematical formula in it to me. – cimmanon Feb 06 '14 at 13:42
  • It is about flex-grow, that is quite clear for me. I am more interested in combined grow, shrink and basis – Nedudi Feb 06 '14 at 14:24
  • Did you not read the answer at all? The formula is the same for grow and shrink. The second question shows how basis works. – cimmanon Feb 06 '14 at 14:44
  • flex-shrink is actually a bit different from flex-grow -- before it's used, it gets multiplied by the flex-basis to form the "scaled flex shrink factor", per http://www.w3.org/TR/css3-flexbox/#resolve-flexible-lengths . This is to make elements shrink proportionally, so that shrinking doesn't just make the tinier elements immediately disappear. – dholbert Feb 06 '14 at 21:34

1 Answers1

3

The closest thing to a formula is just the algorithm in the spec:

http://www.w3.org/TR/css3-flexbox/#resolve-flexible-lengths

I don't think it can easily be described in a formula. You can cover easy cases with a formula, but it gets a bit more complex (and requires multiple loops of the algorithm) when elements have min-width or max-width constraints.

SIDE NOTE: the flexbox spec will likely soon make a small change to flex-grow and flex-shrink behavior, so that they're treated more like a percentage when their sum is less than 1. (So e.g. flex-grow: 0.1 would never give you more than 10% of the free space, even if you're the only child.) That proposal is described here: http://lists.w3.org/Archives/Public/www-style/2013Oct/0246.html

dholbert
  • 11,386
  • 3
  • 42
  • 31