Overflow-X не работает в многостолбцовой CSS сетке

Question

У меня есть простая сетка с 2 столбцами. Внутри сетки ячейки overflow-x вроде бы не работают. Есть ли способ сделать этот макет с рабочим overflow-x внутри ячеек?

.main-grid {
  display: grid;
  grid-template-columns: minmax(min-content, 1fr) auto;
  gap: 20px;
}

.main-grid>div {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.main-grid>div>div {
  background-color: lightpink;
}

.scroll-me {
  overflow-x: auto;
}

.i-am-too-wide {
  width: 800px;
}

.margin-top {
  margin-top: 50px;
}

<div class="main-grid">
  <div>
    <div>
      1
    </div>
    <div>
      2
    </div>
  </div>

  <div>
    <div>
      A
    </div>
    <div>
      B

      <div class="scroll-me">
        <div class="i-am-too-wide">
          Wide element inside grid
        </div>
      </div>
    </div>
  </div>
</div>


<div class="scroll-me margin-top">
  <div class="i-am-too-wide">
    WIDE element outside grid
  </div>
</div>