Вместо появления горизонтальной прокрутки растягивается блок

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

.parents
{
  width:50%;
}

.wrapper
{
  overflow:auto;
  width:100%;
  background-color:cyan;
  height:200px;
}

.wide-el
{
  width:2000px;
  height:100px;
  background-color:red;
}

<div class="parent">
  <div class="wrapper">
    <div class="wide-el">
      some content
    </div>
  </div>
</div>