width: inherit minus (or plus)

Question

Is there any method to inherit the width from other class but with minus (or plus) px size ?

This is not proper css but get the idea:

width: inherit - 20px ;

Since I'm using inherit width and 10px padding it goes outside the box for + 20px;

Live example:

.cb {
    width: 340px;
    height: 331px;
    border: 1px solid #ccc;
    padding: 0;
    background: #ccc;
    color: #fff;
    position: fixed;
    bottom: 0;
    right: 41px;
}

.cb .x {
    width: inherit;
    height: 100px;
    border: 0;
    padding: 10px;
    background: #781111;
    overflow-y: auto;
}

<div class="cb">
        
    <div class="cb x">
    text<br>
    text<br>
    text<br>
    text<br>
    text<br>
    text<br>
    text<br>
    text<br>                
   </div>
        
</div>

Answer 1

You can also use calc (see this jsfiddle), but I think that the box-sizing approach by kei might be better for your specific case.

The important parts for calc are:

position:relative;
width: calc(100% - 18px);

Check support for calc here.