width: calc(100% -2rem); returns invalid property value in inspector
so im not sure where the issue but something is happening due to content editable div
i gave width:100% for parent. first child is an image with width of 2rem , so for second child i gave with = 100%-2rem
https://codepen.io/avinash-tallapaneni/pen/MWPyvQe
4 Replies
if you eep typing without spaces it will overflow the container even though width is set to 100%
i gave max-width:97% and its working. im not satisfied with the hard coded values 😢
Use flexbox or grid to just grow into the available space, then you don't need to set any width.
You need a space on both sides of the minus sign (or any mathematical operator) in the calc function:
calc(100% - 2rem)Yup. I've heard of minification breaking calcs with
- in them because it removes the space 😅. We need that though, because there is a difference between - 2 and -2