CSSの計算値（）私は親がようになるはずです<code>width</code></p> <p>equationの減少として<code>width</code>が増加する要素を持っている

Question

が動作していません少なくともChromeでは、幅で除算しようとするとプロパティが無効であると表示されます。

これは可能ですか？ （calc()の代替品も可）

EDIT スペースを追加しました（これについては気づいていません）。いろいろなユニットで試しましたが、運はまだありません。

Fiddle

<div style="width:100%;position:relative;"> 
    <div style="width:calc(150px + (500/100%));position:absolute;top:0;left:0;">This one should get bigger as the page gets smaller</div> 
</div> 

思考プロセス：

一定の幅（150ピクセル）に加えて、現在の親の幅で割った500。したがって

親が500pxなどである場合：

150 + 500/500 - > 150 + 5 = 155 - > 150 + 1 = 151

親は100pxに

150 + 100分の500であります

親は20ピクセル

150 + 20分の500 - > 150 + 100 = 250

Answer 1

解決方法はとてもシンプルです。 500pxを最初の部分に移動し、幅を引いてください。

width:calc(650px - 100%); 

親が狭くなるにつれて大きくなります。

Updated fiddle

Answer 2

このような何かcalc()が（ちょうど+と-中）事業者間のスペースが必要ですが、あなたはpx、em、remなど可能性単位を、欠けている...、そうでしょう：

width:calc(150px + (500px/100%)) 

これを@TylerHで説明されているように、未編集の値（px、%など）で除算することはできないため、無効になります。

もし可能であれば、100％で割ったときに1を掛けているので、1は乗算の中立値なので基本的に同じままになるでしょう。これは役に立たないでしょう。

---

とたん無効まだあなたの質問に見て多くの、そしてそこではないので、知っているしないように、私はあなたの代わりにこのような何かを探している推測している：

width:calc(150px + (100%/500px)) 

---

あなたの編集した質問AFAIKがあれば、あなたはフィドルを提供できない限り、これを達成するためにJSを使用しなければなりません。

Answer 3

すでにあなたの解決策を見つけたようだが、私はあなたの元のコードが機能しなかった理由を、具体的お答えします：

私はAのための構文で始めましょうCALCで製品方程式（あなたが分裂するとき）（）：

<calc-product> = <calc-value> [ '*' <calc-value> |カルクのための「/」<number>]

spec（）プロパティの構文は、それが聞こえるよりも少し複雑です。ここでやっているようにcalc（）で分割するときは、右辺はnumberでなければなりません。

数値は<number>と表示され、小数成分を含む実数を表します。

文字通り書かれた数字は、整数、または小数点以下が10進数で、その後にドット（。）が続き、小数点以下が1桁以上、 "e"または "E"整数。それはCSS Syntax Moduleの生産に相当します。整数の場合と同様に、数字の最初の文字の直前に - または+を付けて数字の記号を示すことができます。言うことです

、あなたはで100％のようなパーセント値を何かを分割することはできません。