Sciter CSS 'flow' attribute browser alternatives

Question

Recently I have been playing around with Sciter, and discovered the incredibly useful flow CSS attribute. The docs have little to say about it, asside from listing it as a Sciter feature, and linking to this article.

Obviously, this doesn't work in browsers, and finding more info on the subject is rather difficult.

I find this feature very helpful in creating nice layouts quickly and with a minimum of fuss and bother, and so I am very interested in anything similar that will work in browsers.

Basically I have two questions:

1. Can I use something similar (eg, using standard CSS) in common browsers? What and how?
2. (Mostly to satisfy idle curiosity) Is this particular extension used in anything besides Sciter?

Answer 1

Using the example from the site:

You could do this (background added for viewing purposes:

p {
  margin-left: calc((100% - 40%) / (2 + 1) * 2);
  margin-right: calc((100% - 40%) / (2 + 1) * 1);
  background-color: #fdfcc1;
}

<p>... some text ...</p>

You would implement it like this with any values:

p {
  margin-left: calc((100% - ELEMENT_WIDTH) / (FLEX_VALUE_LEFT + FLEX_VALUE_RIGHT) * FLEX_VALUE_LEFT);
  margin-right: calc((100% - ELEMENT_WIDTH) / (FLEX_VALUE_LEFT + FLEX_VALUE_RIGHT) * FLEX_VALUE_RIGHT);
}

Or if you're using SCSS, you could do something like this:

$elem-width: 40%;
$flex-left: 2;
$flex-right: 1;

p {
  margin-left: calc((100% - $elem-width) / ($flex-left + $flex-right) * $flex-left);
  margin-right: calc((100% - $elem-width) / ($flex-left + $flex-right) * $flex-right);
}