Полоса прокрутки изменяет размер второго столбца в HTML-макете с двумя столбцами

Question

У меня очень простое расположение в два столбца. Левый столбец содержит меню, правый столбец содержит содержимое. Я хочу расположить контент посередине. Для меню, в котором я использую абсолютное позиционирование, контент имеет определенный запас, который перекрывает меню, и чтобы контент отображался в середине, я добавил поле. Однако, когда высота содержимого слишком велика, появляется полоса прокрутки, которая сокращает содержимое. И эта спина и сокращение сил неуместны.

Чтобы предотвратить это, я установил максимальную ширину для элемента содержимого, который точно соответствует ширине содержимого с полосой прокрутки. Я не думаю, что это такое отличное решение, потому что на маленьких экранах у меня все еще была бы проблема. Что бы вы порекомендовали в этом случае?

https://jsfiddle.net/vntkja1b/4/

var state = true;
$('#toggle').click(function (){
	if (state){
  		for(var i = 0; i< 100; i++){
      	$('.some-lines').append($('<div> hello</div>'));
      }
  } else {
  	$('.some-lines').empty();
  }
  state = !state;
});

body{ margin: 0}

.container__left-col{
  background-color: blue;
  position: fixed;
  left:0;
  top:0;
  width:300px;
  height:100%;
}
.container__right-col{
  margin: 0 0 0 300px;
  height:100%;
}

.content__wrapper{
  background-color: white;
  height:100%;
}

.content{
  margin: 0 25px 0 25px;
  background-color: red;
  height:100%;
  /* max-width:300px; */
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="container">
  <div class="container__left-col">
  kappa
  </div>
  <div class="container__right-col">
    <div class="content__wrapper">
      <div class="content">
        <div class="some-controll">
          <input id="toggle" type="button" value="Toggle"/>
        </div>
        <div class="some-lines">
        
        </div>
      </div>
    </div>
  </div>
</div>