CSS - Can I use an object's Width in Calc()?

Question

I want something like this:

height: calc(width + 5px);

This is just a small example but I'm ultimately looking for a way to use the set width as a part of the calculation, not a simpler way to solve the example. Any searches I do just gives examples on how to use calc() to set the width. Thanks!

Answer 1

Use a container query. The cqw unit represents 1% of the item's width. You can use that unit in your calc() function.

I made the item resizable in the following demo, to make the functionality easier to observe.

.container {
  container-type: inline-size;
  background: #ddd;
  
  /* Make resizable, for demo purposes */
  resize: horizontal;
  overflow: hidden;
}

.item {
  background: orange;
}

@container (min-width: 0) {
  .item {
    /* 50% of container width + 30px */
    height: calc(50cqw + 30px);
  }
}

<div class="container">
  <div class="item">Resize me!</div>
</div>