Превышение родительского элемента с переполнением, установленным на прокрутку

Question

Это код:

<div class="c1">
  <div class="c2">
    <div class="c3">

    </div>
  </div>
</div>
<style>
  .c1{
    overflow-y: scroll;
    overflow-x: visible;
    margin: 50px;
    width: 500px;
    height: 300px;
    background-color: red;
  }
  .c2{
    width: 200px;
    height: 1000px;
    background-color: yellow; 
  }
  .c3{
    margin-left: -50%;
    width: 200px;
    height: 100px;
    background-color: red;
  }
</style>

То, чего я пытаюсь добиться, это иметь функцию прокрутки для оси Y, в то время как зеленый div превосходит другой слева, как это было бы при переполнении -y не установлен для красного div. Это вообще возможно? Вот код для проверки: https://liveweave.com/RCeADH