How to make CSS calc() function work on Custom CSS editor?

Hi,

I have a custom html list whose items I try to show in three columns with flexbox. List items have padding to add room for item background.

li {
  flex: 0 0 calc(33% - 66px);
  padding: 0 16px 0 50px;
  background:  url('check.png') no-repeat left top;
}

The problem is that squarespace has some kind of preprocessor which converts calc() to this: (style copied from browsers inspector)

flex: 0 0 calc(-33%);

How should I write calc() to keep it in the desired format?

You can add CSS to Code Injection Header or add to Code Block, I think it will work there.

<style>
  paste css here
</style>

Thanks tuanphan, it works as there is no preprocessor for code blocks. 🙂

I just would prefer to put all custom code to the same place but if it's not possible I just have to use code blocks.

@Jfer00 This is because the 'Custom CSS' panel is actually the 'Custom LESS' panel 😁.

Any math operations in brackets are calculated first (33-66=-33) and then the CSS parsed. You can avoid this by using escaping it like this:

  flex: 0 0 calc(~"33% - 66px");

@paul2009 Works perfectly. 👌  Thank you so much! 🙌