Working with calc() props for height/width

[alecnicolas]

Are there any plans to allow calc() functions as props to components like Box in the future? We are using calc to account for sizing with toolbars, navigation etc. so it would be awesome if Paste components could support this!

[SiTaggart]

Hi @alecnicolas, working with heights is an interesting problem that Paste comes up against from time to time and I'm not sure we have the best answer yet.

On the one hand we're leaning towards allowing any height or width value, as it's pretty hard to predict what is useful for any given UI. Any value being any valid CSS for a height or width.

On the other, setting heights in particular can be a pretty problematic pattern we want folks to try and avoid if possible. The problem shows itself in a few scenarios all with the same unintended consequence. That consequence is that content might flow into new lines in certain situations, and if the container has a fixed height, the content will either break out of the container, or it might be cut off by the container rendering the newly wrapped content hidden or obscured. Situations can include:

1. Responsive / Fluid layouts. If the screen sizes change, the amount of content that can fit in a horizontal space will reduce meaning content will reflow onto multiple lines.

2. Internationalization. Similar situation, certain languages translate to much longer string lengths, for example German, and when it does some content may be forced to wrap as it no longer fits the horizontal space it once had in English.

3. Finally, scaling or screen zooming. Depending on your method of scaling or zooming a webpage, this may lead to content overflowing its horizontal space and wrapping.

Now, depending on what you're trying to do, using calc might limit some of those unintended consequences but I still think you'd have to be pretty mindful of wrapping situations.

In summary, we'll likely add the ability to set what ever you want some point into the future, but we would encourage you to be extra careful when doing so, so you don't accidentally cut off content in any of the above 3 scenarios

[alecnicolas]

I see, thank you for the detailed response!