Using calc() in MUI

Question

Objective:

To create two divs, side-by-side on a page. Together they should cover 100% of the page. using latest versions of react + MUI.

div on the left should have a fixed width (say 200px).

div on the right should cover the rest of the page.

In CSS, one could use calc(100% - 200px) to dynamically compute the width of div on the right.

Issue Faced:

I couldn't use that in MUI. I tried inline styling ( style={{width='calc(100%-200)'}}), which compiles but doesn't work. I also tried makeStyles(), but with no avail.

I deeply appreciate the community's help in this matter.

Answer 1

I just want to point out that the key issues I see is no spaces between the '-' and no 'px' after 200.

So you have style={{width='calc(100%-200)'}}

Should be style={{width='calc(100% - 200px)'}}

I realize this is already shown in the original answer but I thought some more clarification on the specifics of the issue would help.