width: inherit minus (or plus)

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>

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.

Tags:

Css

Inheritance

Overflow

Height

Width

Recent Posts