С Спецификация
Вычисленное значение выражения calc () - это выражение со всеми вычисленными компонентами.
Если проценты не разрешены во время вычисления значения , они не разрешены в выражениях calc () , например, calc (100% - 100% + 1em) разрешается в calc (1em + 0%), а не в 1em. Если являются специальными правилами для вычисления процентов в значении (например, свойство height), они применяются всякий раз, когда выражение calc () содержит проценты .
Нет волшебства при использовании процента внутри calc(), они просто будут вести себя так, как будто вы не используете calc().
Таким образом, использование width:100% точно так же, как width:calc(100%), что также совпадает с calc(50% + 50%). когда вы добавляете другую единицу, например width:calc(100% - 2em), это все равно что вычислять width:100%, тогда вы удаляете 2em из нее.
Как правило, calc() полезен при комбинировании процентного и непроцентного значения, чтобы получить точный и точный результат, например , удаляющий 10px из 50% общей ширины с помощью width:calc(50% - 10px) ,
что произойдет, если вы захотите выполнить какой-либо расчет на основе другого свойства? Например, установить ширину на основе какого-либо расчета высоты?
Вы не можете делать такие вещи с calc(). CSS вообще не допускает такой вещи. Вы можете рассмотреть JS, некоторые хаки , чтобы сохранить соотношение между шириной / высотой , или использовать переменную CSS и назначить одно и то же значение для различных свойств.
Смежный вопрос, в котором неправильно используется calc() в сочетании с переменной CSS: Calc () выдает неожиданное значение