Исправлено div наследовать ширину относительного div

Question

У меня есть относительный div с шириной 40%. После этого существует фиксированный div, который должен наследовать эту ширину.

Так что я установил мой HTML документ следующим образом:

<div class="sidebar"></div> 
    <div class="maincontent"> 
     <div class="fixed--wrapper"> 
      <div class="fixed--header"> 
     </div> 
    </div> 
</div> 

И мой CSS:

.sidebar { 
    width: 20%; 
    height: 100vh; 
    overflow: hidden; 
    position: fixed; 
    background-color: #000; 
    color: #fff; 
    float: left; 
} 

.maincontent { 
    float: right; 
    position: relative; 
    width: 80%; 
    background-color: #D00; 
    height: 300px; 
} 

.fixed--wrapper { 
    width: 40%; 
    position: relative; 
    float: left; 
    border-right: 1px solid rgba(0, 0, 0, 0.2); 
    height: 100%; 
    overflow-y: scroll; 
    background-color: #E00; 
} 

.fixed--header { 
    height: 60px; 
    width: inherit; 
    position: fixed; 
    z-index: 2; 
    background-color: #fff; 
} 

Теперь возникает проблема, что мой фиксированный - заголовок, как на 8% больше, чем фиксированной -wrapper. Чтобы проиллюстрировать это мнение, следующий скрипт: https://jsfiddle.net/zj0Lpu0q/1/

Я хочу, чтобы мой фиксированный заголовок составлял 40%.

Sidenote: Я знаю, что существует множество вопросов об этом, но я не мог найти тот, у которого есть относительный div с шириной в процентах. Поэтому я создал этот новый вопрос. Если бы вы могли связать меня с другим ответом, я тоже счастлив.

Answer 1

Попробуйте заменить свой CSS на эту

.fixed--wrapper { 
width: 40%; 
position: relative; 
float: left; 
border-right: 1px solid rgba(0, 0, 0, 0.2); 
height: 100%; 
overflow-y: scroll; 
background-color: #E00;} 

.fixed--header { 
height: 60px; 
position:absolute; 
width:100%; 
z-index: 2; 
background-color: #fff;}