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.

Answer 2

Add box-sizing:border-box to .cb .x

.cb {     width: 340px;     height: 331px;     border: 1px solid #ccc;     padding: 0;     background: #ccc;     color: #fff;     position: fixed;     bottom: 0;     right: 41px; }  .cb .x {     box-sizing:border-box;     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>