Установите DIV с фиксированным положением по вертикали и абсолютным положением по горизонтали.

Question

Я создаю веб-сайт, состоящий из трех элементов: заголовка, левого div с содержимым и правого div с изображением.

У меня есть левый и правый div, заданные в процентах от окна, НО я хотел бы установить минимальную ширину для контейнера (и, следовательно, и левый и правый div), ниже которого появляется горизонтальная прокрутка и правый div прокручивает с правой стороны окна. Выше минимальной ширины окна правый элемент div должен быть зафиксирован справа от экрана.

Достаточно просто, НО я хочу, чтобы правый div был зафиксирован вертикально в его положении, чтобы прокручивался только левый div.

Я уверен, что это действительно легко для эксперта по CSS, но это поставило меня в тупик. Когда я изменяю правый div на абсолютный, он исчезает в нижней части экрана, когда я устанавливаю его как фиксированный, он перекрывает левый div, когда ширина экрана узкая.

JS Fiddle здесь

HTML:

    <div class="container">
  <div class="left">
    <div class="child">Child</div>
    <div class="child">Child</div>
    <div class="child">Child</div>
    <div class="child">Child</div> 
    <div class="child">Child</div>    
  </div>
  <div class="right">
  Right Box
  </div>  
  <div class="header">
  Header
  </div>
</div>

CSS

.container {
  background-color: #BC1417;
  position: absolute;
  width: 100%;
  top: 0px;
  left: 0px;
  min-width:600px;
}
.right {
  width: 50%;
  height: 400px;
  position: fixed;
  bottom: 0px;
  right: 0px;
  background-color: #3ED623;
  min-width: 300px;
}
.left {
  width: 45%;
  height: 1700px;
  position: absolute;
  top: 200px;
  left: 0px;
  margin-left: 5%;
  margin-bottom: 80px;
  background-color: #120C98;
  min-width: 270px;
}
.header {
  width: 100%;
  height: 100px;
  position: fixed;
  background-color: #B210C8
}
.child {
  width: 90%;
  height: 300px;
  left: 5%;
  background-color: #F8FF00;
  border: 2px solid #62495D;
  position: relative;
  margin-top: 30px;
}