0

Element in question expands based on differing child dimensions. I figure you'd do this with modulus and calc(), but am having trouble implementing it, given modulus not existing. Using this in an React project, so JS would be fine, but would like to try to accomplish via CSS if possible.

Example would be an element having children that total to 175 pixels of width and wanting a round up to 180px.

George Liebert
  • 91
  • 1
  • 6

2 Answers2

0

You can acomplish this by setting padding on the parent like so:

Here is a CodeSandbox for it:

https://codesandbox.io/s/blue-monad-r7tnx

Child could have any width but parent would always get the wanted separation. Does this answer your question?

You could always use max-width to set a top limit to some width

niconiahi
  • 545
  • 4
  • 5
  • This only is effective for the specific example of 175px -> 180px. I'd essentially need it to go to 180px for anything between 171 and 180, 10 for anything between 1 and 10, etc. As a result, max-width is not super relevant either. – George Liebert Mar 25 '20 at 02:51
  • How would you be getting a dinamic witdth? Are you using some CSS preprocessor? – niconiahi Mar 25 '20 at 03:26
0

Try using REM and EM units. Default one rem is 16px.

Sadesh Kumar N
  • 1,962
  • 7
  • 19
  • 26