sassでremと%を計算したい

Question

画面を左中右の３つに分割し、
#item-centerをrem指定で真ん中配置したいと思っています。
ブラウザのビューポートというよりは、文字の大きさに合わせて画面のレイアウトを作ります。
ルートの文字の大きさで真ん中のエリアの横幅を決め、
両側は均等配置するようにします。

例えば、具体的な値を以下のように仮定します。

• #containerのwidthが1000px
• 1remが10px

そのとき、ブラウザでのComputedの値が、下記のようになるのが理想です。

• #item-centerのwidthは70rem=700px
• #item-leftのwidthは(1000%-70rem)/2 = (1000px-700px)/2 = 150px
• #item-rightのwidthは(1000%-70rem)/2 = (1000px-700px)/2 = 150px

下記のsassはエラーになります。
calcが単位変換でエラーになるからです。
このような計算を実現したいとき、皆さんはどうしていますか？

*
    margin: 0px
    padding 0px
    overflow: hidden
#container
    width: 100%
    height: 100%
    display: flex
    flex-direction: row
#item-left
    height: 100%
    width: calc(100%-70rem)/2
#item-center
    height: 100%
    width: 70rem
#item-right
    height: 100%
    width: calc(100%-70rem)/2

<div id="container">
    <div id="item-left">
    </div>
    <div id="item-center">
    </div>
    <div id="item-right">
    </div>
</div>

Comments

[Lhankor_Mhy]

どういうCSS出力を想定されているのですか？

[ShortArrow]

ご指摘ありがとうございます！追記します。

[Lhankor_Mhy]

追記ありがとうございました。ご解決されて何よりです。

Answer 1

width: calc(calc(100%-70rem)/2)にしたら計算できました。