Как установить разные переполнения для одного и того же элемента с помощью оболочки?

Question

Моя проблема заключается в переполнении, поскольку установка одного переполнения влияет на другое (x & y).

Это обсуждалось здесь ранее, но только этот ответ , в котором обсуждается это решение относится к моей проблеме, так как у меня динамическая высота.

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

Мне нужно только показать вертикальную полосу прокрутки второго уровня, в то время как горизонтальное содержимое третьего уровня всегда видно.

В чем проблема?

Код можно найти здесь или по codepen :

HTML:

<div class="container">
<ul class="first-level">
  <li class="first-level__container">
    <span class="first-level__content">
      1
      <div class="wrapper">
      <ul class="second-level">
        <li class="second-level__container">
          <span class="second-level__content">
            1.1
            <ul class="third-level">
              <li class="third-level__container"><span class="second-level__content">1.1.1</span></li>
              <li class="third-level__container"><span class="second-level__content">1.1.2</span></li>
              <li class="third-level__container"><span class="second-level__content">1.1.3</span></li>
              <li class="third-level__container"><span class="second-level__content">1.1.4</span></li>
            </ul>
          </span>
        </li>
      </ul>
              </div>
    </span>
  </li>
  <li class="first-level__container">
    <span class="first-level__content">
      2
        </li>
      </ul>
    </span>
  </li>
</ul>

</div>

SCSS:

.container {
  width: 220px;
  border: red 1px solid;
}
ul {
  padding: 0;
}

.first-level {
  display: flex;
  width: 100%;
  overflow-x:auto;
  .first-level__container {
    display: flex;

    .first-level__content {
      border: 1px solid gray;
      width: 100px;
      position: static;
      .wrapper{
        position: absolute;
        left: 0;
      top: 50px;
      }
    }
    .second-level {
      width:50px;
      border: 1px solid purple;
      overflow-y:auto;
      overflow-x: visible;

      .second-level__content {
        width: 100px;
        max-height: 30px;
        display: block;


        .third-level{
          min-height: 100%;
        }
      }
    }
  }
}

ul {
  list-style: none;
}