4

I have a parent element with

position: relative;
overflow-y: unset;

and a child element with

position: relative;
left: -70px;

This looks fine. But the child element get clipped its left side after setting overflow-y: auto on the parent. I do not understand why this happens. How can I add a vertical (auto) scrollbar to the parent without clipping the child?

const checkbox = document.getElementById('checkbox');
const right = document.querySelector('.right');
const value = document.getElementById('value');

checkbox.addEventListener('change', (event) => {
  const overflowY = event.target.checked ? 'auto' : 'unset';
  right.style.overflowY = overflowY;
  value.innerText = overflowY;
});
.right {
  background-color: red;
  width: 100px;
  height: 300px;
  position: relative;
  left: 200px;
  /* toggle overflow-y between unset and auto */
  overflow-y: unset;
}

.two {
  background-color: blanchedalmond;
  top: 50px;
  height: 50px;
  position: relative;
  left: -70px;
}
<body>
  <p>
    Whenever overflow-y changes from unset to auto the yellowish block gets clipped.
  </p>
  <p>
    <input id="checkbox" type="checkbox"> overflow-y: <span id="value">unset</span>
  </p>

  <div class="right">
    <div class="two right-content"></div>
  </div>
</body>
isherwood
  • 58,414
  • 16
  • 114
  • 157
bollin
  • 185
  • 11

1 Answers1

0

const checkbox = document.getElementById('checkbox');
const right = document.querySelector('.right');
const value = document.getElementById('value');

checkbox.addEventListener('change', (event) => {
  const overflowY = event.target.checked ? 'auto' : 'unset';
  right.style.overflowY = overflowY;
  value.innerText = overflowY;
});
    .right {
      background-color: red;
      width: 100px;
      height: 300px;
      position: relative;
      left: 200px;
      /* toggle overflow-y between unset and auto */
      overflow-y: auto;
      /*Try This*/
      display: inline-table;
    }

    .two {
      background-color: blanchedalmond;
      top: 50px;
      height: 50px;
      position: relative;
      left: -70px;
    }
    <body>
      <p>
        Whenever overflow-y changes from unset to auto the yellowish block gets clipped.
      </p>
      <p>
        <input id="checkbox" type="checkbox"> overflow-y: <span id="value">unset</span>
      </p>

      <div class="right">
        <div class="two right-content"></div>
      </div>
    </body>
Addler Kyldson
  • 46
  • 4